Available from v8.1.0
BB.IconButton
BB.IconButton is a SwiftUI button component with icon-first layout, optional title text, and loading-indicator state.
Platform availability: iOS 17.0+
- Supports primary and danger appearances.
- Supports loading state through showIndicator(_:).
- Uses SwiftUI enabled and disabled environment state.
When to use:
- Use BB.IconButton for compact icon-led actions in toolbars and grouped actions.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
|
|
Default |
No Title |
Loading |
Disabled |
Disabled No Title |
API reference
BB.IconButton
Initializers
init(icon:title:appearance:action:)
Creates an icon button with the specified configuration.
|
Parameter |
Type |
Description |
|---|---|---|
|
icon |
Image |
The image to display in the button |
|
title |
String? |
Optional text to display below the icon |
|
appearance |
BB.IconButton.Appearance |
The visual styling to apply |
|
action |
@escaping () -> Void |
Closure executed when the button is tapped |
Enumerations
Appearance
Defines the visual appearance styles available for the icon button.
|
Case |
Description |
|---|---|
|
danger |
Warning appearance for destructive or critical actions |
|
primary |
Standard appearance for primary actions |
Methods
showIndicator(_ show: Bool)
Sets whether the button should display a loading indicator.
|
Parameter |
Type |
Description |
|---|---|---|
|
show |
Bool |
Whether to show the loading indicator |
Returns: Self - Modified icon button instance.
showIndicator(_ show: Binding<Bool>)
Sets whether the button should display a loading indicator using a SwiftUI binding.
|
Parameter |
Type |
Description |
|---|---|---|
|
show |
Binding<Bool> |
Binding that controls the indicator visibility |
Returns: Self - Modified icon button instance.
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
action |
() -> Void |
Required |
|
appearance |
BB.IconButton.Appearance |
Required |
|
icon |
Image |
Required |
|
title |
String? |
nil |
action
The action property defines the closure executed when the button is tapped. Actions are blocked when the button is disabled or in a loading state.
BB.IconButton(icon: DesignSystem.Images.icAdd(), appearance: .primary, action: {
// Handle action
})
appearance
The appearance property sets the visual style. Use .primary for standard actions and .danger for destructive actions.
BB.IconButton(icon: DesignSystem.Images.icDelete(), appearance: .danger, action: {})
icon
The icon property sets the image displayed in the button. Use BackbaseDesignSystem icons for optimal rendering.
BB.IconButton(icon: DesignSystem.Images.icAdd(), appearance: .primary, action: {})
title
The title property sets optional text displayed below the icon.
BB.IconButton(icon: DesignSystem.Images.icAdd(), title: "Add", appearance: .primary, action: {})
Usage
Basic usage
import SwiftUI
import BackbaseDesignSystem
BB.IconButton(
icon: DesignSystem.Images.icAdd(),
appearance: .primary,
action: {
// Handle action
}
)
Common use cases
With title
Display a text label below the icon.
BB.IconButton(
icon: DesignSystem.Images.icDelete(),
title: "Delete",
appearance: .danger,
action: {
// Handle delete
}
)
With loading indicator
Show a progress indicator while an operation is in progress.
@State private var isLoading = false
BB.IconButton(
icon: DesignSystem.Images.icRefresh(),
title: "Refresh",
appearance: .primary,
action: {
isLoading = true
// Perform async operation
}
)
.showIndicator($isLoading)
Disabled state
Disable the button using the SwiftUI environment.
BB.IconButton(icon: DesignSystem.Images.icAdd(), appearance: .primary, action: {})
.disabled(true)
States and variants
Primary
This state is the default appearance for standard actions.
Visual characteristics:
- Primary token color set from design tokens
- Standard action semantics
BB.IconButton(icon: DesignSystem.Images.icAdd(), appearance: .primary, action: {})
Danger
This state is used for destructive or critical actions.
Visual characteristics:
- Danger token color set from design tokens
- Destructive action semantics
BB.IconButton(icon: DesignSystem.Images.icDelete(), appearance: .danger, action: {})
Loading
This state occurs when showIndicator(true) is applied.
Visual characteristics:
- Progress indicator visible instead of icon
- Action tap blocked during loading
BB.IconButton(icon: DesignSystem.Images.icRefresh(), appearance: .primary, action: {})
.showIndicator(true)
Disabled
This state occurs when .disabled(true) is applied.
Visual characteristics:
- Disabled token colors applied
- Action tap blocked
BB.IconButton(icon: DesignSystem.Images.icAdd(), appearance: .primary, action: {})
.disabled(true)
Customization
Styling
|
API |
Description |
|---|---|
|
appearance: .primary, appearance: .danger |
Appearance variants |
|
.showIndicator(true) |
Loading indicator state |
Custom styles
Theme customization applies through icon button tokens defined in defaultTokens.json.
Error handling
BB.IconButton does not throw errors in its public API.
Events
|
Event |
Type |
Description |
|---|---|---|
|
action |
() -> Void |
Called when tapped if enabled and not loading |
Accessibility
This component can be configured with accessibility features at the integration level. Use standard SwiftUI accessibility modifiers.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the accessibility label for screen readers |
|
.accessibilityHint(_:) |
Sets the action hint |
|
.accessibilityValue(_:) |
Sets dynamic state description |
Best practices
- Provide meaningful accessibility labels that describe the button's purpose.
- Use accessibility hints to provide additional context when needed.
- Update accessibility value when the button state changes.
BB.IconButton(icon: DesignSystem.Images.icDelete(), title: "Delete", appearance: .danger, action: {})
.accessibilityLabel("Delete item")
.accessibilityHint("Double tap to delete this item")
Dependencies
- External dependencies:
- None: No third-party package dependency for the public API.
- Framework requirements: SwiftUI.
- Internal dependencies:
- BackbaseDesignSystem: Icon button tokens and icon assets.
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
Tokens are defined in defaultTokens.json, which is integrated in the bundle of the framework, and can be customized by providing your own theme JSON file.
Token groups used by IconButton:
- color/icon-button/primary: Background, foreground, and indicator colors for primary appearance
- color/icon-button/danger: Background, foreground, and indicator colors for danger appearance
Primary IconButton tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.icon-button.primary.default.background |
{theme.color.background.brand} |
|
Background (pressed) |
theme.color.icon-button.primary.pressed.background |
{theme.color.background.brand-pressed} |
|
Foreground |
theme.color.icon-button.primary.default.foreground |
{theme.color.on-background.brand} |
|
Indicator |
theme.color.icon-button.primary.default.indicator |
{theme.color.on-background.brand} |
Danger IconButton tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.icon-button.danger.default.background |
{theme.color.background.danger} |
|
Background (pressed) |
theme.color.icon-button.danger.pressed.background |
{theme.color.background.danger-pressed} |
|
Foreground |
theme.color.icon-button.danger.default.foreground |
{theme.color.on-background.danger} |
Localization
No public localization keys are exposed for this component.
Known limitations
- showIndicator(true) hides the icon and blocks action calls.
- Actions are automatically blocked when the button is in a loading state or disabled.
See also
- BB.FloatingActionButton - Floating action variant
- BB.Button - Standard button component