DSButton

Basic usage

Primary button with a simple action.

DSButton("Save", variant: .primary) {
    viewModel.save()
}

With icon and loading state

Button that shows a spinner while saving.

DSButton(
    "Submit",
    variant: .primary,
    icon: "paperplane.fill",
    isLoading: viewModel.isSaving
) {
    viewModel.submit()
}

Action group

Combination of primary, secondary and ghost.

HStack(spacing: DSSpacing.sm) {
    DSButton("Confirm", variant: .primary, action: confirm)
    DSButton("Cancel", variant: .ghost, action: cancel)
}

Destructive with confirmation

Always pair with a confirmation dialog.

DSButton("Delete account", variant: .destructive) {
    showConfirmationAlert = true
}

✓ Use DSButton for:

• • Primary actions in forms, dialogs, and screens (Save, Submit, Confirm)
• • Call-to-action buttons in marketing sections
• • Destructive actions with confirmation (Delete, Remove)
• • Success confirmations (Complete, Approve)

✗ Avoid using for:

• • Navigation between screens (use NavigationLink or DSLink)
• • Icon-only actions in toolbars (use DSIconButton)
• • Inline text actions (use DSLink)
• • More than 3 buttons in a row (consider DSMenuButton or DSBottomSheet)

Consider instead:

VoiceOver

Announces label and state (e.g., 'Save, button' or 'Save, loading, button'). Disabled state is announced automatically.

Keyboard

• • Space or Return to activate
• • Tab to focus in forms
• • Command+Return for primary actions

Traits