actions/DSButtonGroup

DSButtonGroup

actions
since 1.2.0

Horizontal pair of buttons for common action patterns like Cancel + Confirm.

iOSmacOS

Purpose

Use for dialogs, forms, or any UI requiring paired actions. Automatically handles spacing and layout.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

PropTypeDefaultDescription
primaryLabelreqString—Primary button text
primaryVariantDSButtonVariant.primaryPrimary button style
primaryActionreq(() -> Void)—Primary button action
secondaryLabelreqString—Secondary button text
secondaryVariantDSButtonVariant.ghostSecondary button style
secondaryActionreq(() -> Void)—Secondary button action
spacingCGFloatDSSpacing.smSpace between buttons

Examples

Dialog actions

Cancel and confirm buttons for a dialog.

swift
DSButtonGroup(
    primaryLabel: "Delete",
    primaryVariant: .destructive,
    primaryAction: { deleteItem() },
    secondaryLabel: "Cancel",
    secondaryAction: { dismiss() }
)

Form actions

Save and cancel for a form.

swift
DSButtonGroup(
    primaryLabel: "Save",
    primaryVariant: .primary,
    primaryAction: { saveForm() },
    secondaryLabel: "Cancel",
    secondaryVariant: .ghost,
    secondaryAction: { cancelEdit() }
)

Usage Guidelines

  • Place primary action on the right (trailing position)
  • Use destructive variant for dangerous primary actions
  • Keep button labels short and action-oriented
  • Secondary button typically uses ghost or secondary variant

Related Components

ButtonAlertModal