actions/DSIconButton

DSIconButton

actions
since v1.0

Compact button containing only an SF Symbol. Ideal for toolbars, navigation bars, and contextual actions in lists.

iOS 17+macOS 14+

Purpose

Saves space in contexts where the icon is self-explanatory, such as close, share, or favourite.

Variants

Ghost

.ghost

Default. Transparent background with a subtle border.

Primary

.primary

Primary colour background. Use for highlighted actions.

Secondary

.secondary

Neutral background. Suitable for toolbars.

Destructive

.destructive

Destructive action icon with a muted red background.

States

default

Resting state.

hover

Scale 1.08× with visual feedback.

pressed

Scale down via spring.

disabled

45% opacity.

Props

PropTypeDefaultDescription
iconreqString—SF Symbol name (e.g. 'heart.fill').
sizeDSButtonSize.mdControls tap target size.
variantDSButtonVariant.ghostVisual style.
isDisabledBoolfalseDisables the button.
actionreq(() -> Void)—Action on tap.

Examples

Basic toolbar

Action group in a navigation bar.

swift
HStack(spacing: DSSpacing.xs) {
    DSIconButton(icon: "bell", variant: .ghost) {
        showNotifications = true
    }
    DSIconButton(icon: "gearshape", variant: .ghost) {
        showSettings = true
    }
}

Destructive action in list

Delete button in a swipe action.

swift
DSIconButton(icon: "trash", variant: .destructive, size: .lg) {
    deleteItem(item)
}

Usage Guidelines

  • Use .dsTooltip() to describe non-obvious actions on macOS.
  • Minimum tap target of 44×44pt on iOS.

When to Use

✓ Use DSIconButton for:

  • • Toolbars and navigation bars where space is limited
  • • Contextual actions in lists (favorite, share, delete)
  • • Icon-only actions where the icon is universally understood
  • • Floating action buttons

✗ Avoid using for:

  • • Actions that need text labels for clarity (use DSButton)
  • • Primary actions in forms (use DSButton with text)
  • • Actions with ambiguous icons (add tooltip or use DSButton)

Consider instead:

DSButton

When text label is needed for clarity

DSMenuButton

For grouped icon actions (ellipsis menu)

Accessibility

VoiceOver

Announces icon name and action (e.g., 'Heart, Button, Add to favorites')

Keyboard

  • • Space or Return to activate
  • • Tab to focus

Dynamic Type

✓ Supported

Contrast

WCAG AA compliant for all variants

Traits

.isButtonaccessibilityLabel required for clarity

Related Components

ButtonNavigationBar