Back to AtesKit
UI Components

Button Modifiers

AtesKit provides a comprehensive set of button modifiers for SwiftUI that deliver premium, interactive button styles with built-in animations, press states, and loading indicators.

Common Features

Press Animations: Built-in scale and opacity animations on press
Loading States: Automatic loading indicator with content fade
Disabled States: Automatic opacity adjustment when disabled
Customizable: Support for custom colors, shapes, and padding

AKPrimaryButtonModifier

A premium primary button with gradient background and shadow for main actions.
USE CASES
Submit forms
Confirm actions
Primary CTAs (Call-to-Action)
Save or create operations
PARAMETERS
tint
S: ShapeStyle
Default: Color.accentColor
The color tint for the button background
margin
AKPadding.Set
Default: .xxMedium
Internal padding of the button
clipShape
C: Shape
Default: RoundedRectangle(cornerRadius: AKRadius.small.rawValue)
The shape to clip the button
onLoading
Bool
Default: false
Shows loading indicator when true
USAGE EXAMPLE
Swift
Button {
    // Action
} label: {
    Text("Continue")
        .frame(maxWidth: .infinity)
        .akPrimaryButton(
            tint: Color.blue,
            margin: .medium,
            onLoading: false
        )
}

AKSecondaryButtonModifier

A premium secondary button with border and subtle background for secondary actions.
USE CASES
Cancel actions
Secondary options
Navigation buttons
Alternative choices
PARAMETERS
tint
S: ShapeStyle
Default: Color.accentColor
The color for the button border and text
margin
AKPadding.Set
Default: .xxMedium
Internal padding of the button
clipShape
C: Shape
Default: RoundedRectangle(cornerRadius: AKRadius.small.rawValue)
The shape to clip the button
onLoading
Bool
Default: false
Shows loading indicator when true
USAGE EXAMPLE
Swift
Button {
    // Action
} label: {
    Text("Cancel")
        .frame(maxWidth: .infinity)
        .akSecondaryButton(
            tint: Color.gray,
            margin: .medium
        )
}

AKGhostButtonModifier

A minimal ghost button for less prominent actions with subtle hover effects.
USE CASES
Tertiary actions
Text-like buttons
Minimalist interfaces
Less important actions
PARAMETERS
tint
S: ShapeStyle
Default: Color.accentColor
The color for the button text
margin
AKPadding.Set
Default: .small
Internal padding of the button
clipShape
C: Shape
Default: RoundedRectangle(cornerRadius: AKRadius.small.rawValue)
The shape to clip the button
onLoading
Bool
Default: false
Shows loading indicator when true
USAGE EXAMPLE
Swift
Button {
    // Action
} label: {
    HStack {
        Image(systemName: "arrow.left")
        Text("Back")
    }
    .akGhostButton(tint: Color.primary)
}

AKDestructiveButtonModifier

A destructive button for dangerous actions like delete, with red color scheme.
USE CASES
Delete operations
Remove items
Destructive confirmations
Account deletion
PARAMETERS
filled
Bool
Default: true
Whether the button should be filled (true) or outlined (false)
margin
AKPadding.Set
Default: .xxMedium
Internal padding of the button
clipShape
C: Shape
Default: RoundedRectangle(cornerRadius: AKRadius.small.rawValue)
The shape to clip the button
onLoading
Bool
Default: false
Shows loading indicator when true
USAGE EXAMPLE
Swift
Button {
    // Delete action
} label: {
    Text("Delete Account")
        .frame(maxWidth: .infinity)
        .akDestructiveButton(
            filled: true,
            margin: .medium
        )
}

AKOtherButtonModifier

A muted button for tertiary actions with system background fill (Legacy support).
USE CASES
Legacy support
Tertiary actions
Muted UI elements
Background actions
PARAMETERS
tint
S: ShapeStyle
Default: Color.accentColor
The color for the button text
margin
AKPadding.Set
Default: .xxMedium
Internal padding of the button
clipShape
C: Shape
Default: RoundedRectangle(cornerRadius: AKRadius.small.rawValue)
The shape to clip the button
onLoading
Bool
Default: false
Shows loading indicator when true
USAGE EXAMPLE
Swift
Button {
    // Action
} label: {
    Text("Other Action")
        .frame(maxWidth: .infinity)
        .akOtherButton(tint: Color.secondary)
}

Protocol

Most button modifiers conform to the AKButtonModifierProtocol which ensures consistent interface across different button types.
Swift
public protocol AKButtonModifierProtocol {
    associatedtype S: ShapeStyle
    
    var tint: S { get set }
    var margin: Double { get set }
    var onLoading: Bool { get set }
}