Skip to main content
161

Search Lumen

Find components, APIs, guides, and recipes.

GitHub
Apple docs
ActionsApple

Icon button

Trigger a native action with a required accessible label and platform icon.

Public APILumenIconButtonApple / SwiftUISwift product: LumenUI

Apple availability

Supported native targets

Import LumenUI in the target that uses this component. iPad support follows the iOS package baseline and uses native iPad layout behavior.

iPhone · iOS 16+iPad · iPadOS 16+Mac · macOS 13+Apple TV · tvOS 16+Apple Vision · visionOS 1+Apple Watch · watchOS 9+

Native example

Use Icon button

Use for compact, familiar actions. Prefer a text button when the icon alone would make the action difficult to understand.

Icon button rendered in the iPhone simulator Lumen playground
Verified runtime captureiPhone simulator
swift
LumenIconButton(
    name: .settings,
    label: "Settings",
    action: openSettings
)

Apple icon catalog

Choose an icon name

Search the visual catalogs, copy the displayed Lumen name, then use the Apple spelling below. The package includes both catalogs without another native dependency.

Brand icons

Use the platform form .brandGithub. Brand marks retain their Font Awesome attribution and may be protected trademarks.

Browse all brand icon names

Platform or product artwork

Use systemName: "magnifyingglass" when the operating system or your product owns the symbol instead of Lumen.

Reference

Public API

The primary shared and platform-specific options exposed by LumenIconButton.

APIValues or typeDefaultDescription
name or systemNameLumenIconName or SF Symbol nameExactly one requiredSelects a generated catalog icon or a platform-specific custom graphic.
labelStringRequiredProvides the accessible action name.
actionCallbackRequiredRuns the action.
intentprimary · secondary · quiet · dangerquietSelects the semantic action treatment.
sizesm · md · lgmdSelects shared icon and control metrics.
SwiftUI .disabledBooleanfalseControls native disabled state.

Native behavior

Design and accessibility

When to use it

Use for compact, familiar actions. Prefer a text button when the icon alone would make the action difficult to understand.

Accessibility

The accessible label is required and becomes the native button name. Touch targets remain at least 44 units on mobile.

Shared component

Available on other platforms

React NativeAndroid / Compose
Apple docsSwiftUI package