Button is a themed replacement for UIButton with multiple styles, loading states, and design system integration.
Platform availability: iOS 17.0+
When to use:
- Use Button when you need a tappable action element that follows your design system's theming and supports loading states.
- Consider using FloatingActionButton when you need a prominent action that should remain visible while scrolling.
- Consider using ButtonGroup when you need to display multiple related actions together.
Features:
- Multiple style variants (primary, secondary, link, success, danger, onColor).
- Built-in loading indicator with activity spinner.
- Configurable corner radius and border styling.
- Support for disabled and highlighted states.
- Integration with SummaryStackView via SummaryStackRow protocol.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
Leading icon |
Loading |
|
|
|
On device |
|
API reference
Button
A UIButton subclass with themed styling, loading states, and design system integration.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
normalBackgroundColor |
UIColor |
Background color of the button in normal state. |
|
highlightedBackgroundColor |
UIColor |
Background color when the button is highlighted. |
|
disabledBackgroundColor |
UIColor |
Background color when the button is disabled. |
|
normalBorderColor |
UIColor? |
Border color in normal state. |
|
highlightedBorderColor |
UIColor? |
Border color in pressed state. |
|
disabledBorderColor |
UIColor? |
Border color when disabled. |
|
borderWidth |
CGFloat |
Width of the button border. Default is 0. |
|
minimumHeight |
CGFloat |
Minimum height constraint. Default is 0. |
|
cornerRadius |
DesignSystem.CornerRadiusTypes |
Corner radius type. Default is .none. |
|
customSpacingAfter |
CGFloat? |
Custom spacing when used in a SummaryStackView. |
|
usesEdgeInsetsForHeight |
Bool |
Whether to use edge insets for height calculation. |
|
indicator |
UIActivityIndicatorView |
Activity indicator shown during loading. |
|
accessibilityLabelWhenLoading |
String? |
Accessibility label applied during loading state. |
|
onTraitCollectionDidChange |
((UITraitCollection?) -> Void)? |
Callback when trait collection changes. |
Initializers
init(frame:usesEdgeInsetsForHeight:buttonType:)
|
Parameter |
Type |
Description |
|---|---|---|
|
frame |
CGRect |
The frame rectangle for the view. Default is .zero. |
|
usesEdgeInsetsForHeight |
Bool |
Use edge insets instead of height constraint. Default is true. |
|
buttonType |
ButtonType |
Button size type (.small or .medium). Default is .medium. |
Methods
- startLoading() Shows the progress indicator and disables the button.
- stopLoading() Dismisses the progress indicator and enables the button.
Button.ButtonType
|
Case |
Description |
|---|---|
|
.small |
Small sized button. |
|
.medium |
Medium sized button (default). |
Usage
Basic usage
let button = Button()
DesignSystem.shared.styles.primaryButton(button)
button.setTitle("Submit", for: .normal)
Primary button
let primaryButton = Button()
DesignSystem.shared.styles.primaryButton(primaryButton)
primaryButton.setTitle("Continue", for: .normal)
Secondary button
let secondaryButton = Button()
DesignSystem.shared.styles.secondaryButton(secondaryButton)
secondaryButton.setTitle("Cancel", for: .normal)
Link button
let linkButton = Button()
DesignSystem.shared.styles.linkButton(linkButton)
linkButton.setTitle("Learn more", for: .normal)
With loading indicator
let button = Button()
DesignSystem.shared.styles.primaryButton(button)
button.setTitle("Submit", for: .normal)
// Show loading state
button.startLoading()
// Hide loading state
button.stopLoading()
Small button
let smallButton = Button(buttonType: .small)
DesignSystem.shared.styles.primaryButton(smallButton)
smallButton.setTitle("OK", for: .normal)
On color button
let onColorButton = Button()
DesignSystem.shared.styles.onColorPrimaryButton(onColorButton)
onColorButton.setTitle("Action", for: .normal)
States and variants
Button states
|
State |
Description |
|---|---|
|
Normal |
The normalBackgroundColor and normalBorderColor are applied |
|
Highlighted |
The highlightedBackgroundColor and highlightedBorderColor are applied when pressed |
|
Disabled |
The disabledBackgroundColor and disabledBorderColor are applied, interaction is disabled |
|
Loading |
Activity indicator is shown, button is disabled, text is hidden |
Size variants
|
Size |
Description |
|---|---|
|
.small |
Compact button for constrained spaces |
|
.medium |
Standard button size (default) |
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.primaryButton |
Primary button style with filled background |
|
DesignSystem.shared.styles.secondaryButton |
Secondary button style with border |
|
DesignSystem.shared.styles.linkButton |
Link-style button without background |
|
DesignSystem.shared.styles.successButton |
Success-themed button style |
|
DesignSystem.shared.styles.dangerButton |
Danger-themed button style |
|
DesignSystem.shared.styles.onColorPrimaryButton |
Primary button for colored backgrounds |
|
DesignSystem.shared.styles.onColorSecondaryButton |
Secondary button for colored backgrounds |
|
DesignSystem.shared.styles.onColorLinkButton |
Link button for colored backgrounds |
|
DesignSystem.shared.styles.smallButton |
Small sized button style |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
Accessibility configuration
|
Property |
Type |
Description |
|---|---|---|
|
accessibilityLabel |
String? |
The label read by VoiceOver for the button |
|
accessibilityLabelWhenLoading |
String? |
The accessibility label applied during loading state |
|
accessibilityTraits |
UIAccessibilityTraits |
Inherited button traits from UIButton |
Best practices
- Set a descriptive accessibilityLabel that describes the button's action.
- Use accessibilityLabelWhenLoading to inform users when an action is in progress.
- The button automatically updates its accessibility state when disabled or loading.
Dependencies
- External dependencies: None
- Internal dependencies: SummaryStackRow protocol, DesignSystem.CornerRadiusTypes
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 Button:
- color/button/primary: Primary button background, foreground, and border colors
- color/button/secondary: Secondary button styling with brand border
- color/button/tertiary: Tertiary button styling
- color/button/success: Success-themed button colors
- color/button/danger: Danger-themed button colors
- color/button/link: Link-style button colors
Primary Button tokens:
|
Token |
JSON Path |
References |
Value |
|---|---|---|---|
|
Background (default) |
theme.color.button.primary.default.background |
{theme.color.background.brand} |
Brand background |
|
Background (pressed) |
theme.color.button.primary.pressed.background |
{theme.color.background.brand-pressed} |
|
|
Foreground (default) |
theme.color.button.primary.default.foreground |
{theme.color.on-background.brand} |
Text on brand |
|
Border |
theme.color.button.primary.default.border |
{theme.color.border.none} |
No border |
Secondary Button tokens:
|
Token |
JSON Path |
References |
Value |
|---|---|---|---|
|
Background (default) |
theme.color.button.secondary.default.background |
{theme.color.background.none} |
|
|
Background (pressed) |
theme.color.button.secondary.pressed.background |
{theme.color.background.brand-subtle} |
Subtle brand |
|
Foreground (default) |
theme.color.button.secondary.default.foreground |
{theme.color.foreground.brand} |
Brand text |
|
Border |
theme.color.button.secondary.default.border |
{theme.color.border.brand} |
Brand border |
Danger Button tokens:
|
Token |
JSON Path |
References |
Value |
|---|---|---|---|
|
Background (default) |
theme.color.button.danger.default.background |
{theme.color.background.danger} |
Danger background |
|
Foreground (default) |
theme.color.button.danger.default.foreground |
{theme.color.on-background.danger} |
Text on danger |
Dimension tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Corner Radius |
theme.radius.button.default |
99 (pill shape) |
|
Height (sm) |
theme.height.button.sm |
32 |
|
Height (md) |
theme.height.button.md |
44 |
|
Padding X (sm) |
theme.padding-x.button.sm |
16 |
|
Padding X (md) |
theme.padding-x.button.md |
24 |
|
Border Width |
theme.border-width.button.default |
1 |
Semantic tokens
These tokens are accessed via the public DesignSystem.shared API.
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.primary.default |
Primary button background |
|
Colors |
Theme.colors.danger.default |
Danger button background |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.body, .semibold) |
Button text font |
|
Spacing |
DesignSystem.shared.spacer.md |
Medium spacing |
|
Styles |
DesignSystem.shared.styles.primaryButton |
Primary button style |
|
Styles |
DesignSystem.shared.styles.secondaryButton |
Secondary button style |
|
Styles |
DesignSystem.shared.styles.linkButton |
Link button style |
|
Styles |
DesignSystem.shared.styles.successButton |
Success button style |
|
Styles |
DesignSystem.shared.styles.dangerButton |
Danger button style |
See also
- ButtonGroup - Group of buttons with layout options
- FloatingActionButton - Floating primary action button