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.

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.

Variants

.ghost

Default. Transparent background with a subtle border.

.primary

Primary colour background. Use for highlighted actions.

.secondary

Neutral background. Suitable for toolbars.

.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

Prop	Type	Default	Description
iconreq	String	—	SF Symbol name (e.g. 'heart.fill').
size	DSButtonSize	.md	Controls tap target size.
variant	DSButtonVariant	.ghost	Visual style.
isDisabled	Bool	false	Disables 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

Button NavigationBar