Available from v7.0.0

BB.Button

BB.Button is a customizable SwiftUI button component with various appearances, layouts, and functionalities.

Platform availability: iOS 17.0+

When to use:

• Use BB.Button when you need interactive elements that trigger actions, such as form submissions, confirmations, or navigation.
• Consider BB.Link for text-based navigation or BB.IconButton when space is limited and an icon alone suffices.

Import

                                                        
                                                        
                                                            import SwiftUI
                                                        import BackbaseDesignSystem
                                                        
                                                            

Visual reference

API reference

Enumerations

Appearance

Represents different visual styles of the button.

• primary
• onColorPrimary
• secondary
• onColorSecondary
• tertiary
• onColorTertiary
• success
• danger

Layout

Defines the size variants of the button.

• small
• medium

Initializers

init(text:appearance:layout:action:)

Initializes a new button instance.

Methods

expanded(_:)

Controls whether the button should expand to fill its container.

Returns: BB.Button - The modified button view

showIndicator(_:)

Toggles the visibility of a loading indicator on the button.

Returns: BB.Button - The modified button view

icon(_:)

Sets an icon to be displayed next to the button text.

Returns: BB.Button - The modified button view

Usage

Basic usage

Create a simple button with a tap action.

                                                        
                                                        
                                                            import SwiftUI
                                                        import BackbaseDesignSystem
                                                        
                                                        struct ContentView: View {
                                                            var body: some View {
                                                                BB.Button(text: "Click Me") {
                                                                    print("Button tapped!")
                                                                }
                                                            }
                                                        }
                                                        
                                                            

Advanced usage

Combine multiple modifiers for a fully customized button.

                                                        
                                                        
                                                            import SwiftUI
                                                        import BackbaseDesignSystem
                                                        
                                                        struct ContentView: View {
                                                            var body: some View {
                                                                BB.Button(text: "Submit", appearance: .success, layout: .small) {
                                                                    // Handle submission
                                                                }
                                                                .expanded(true)
                                                                .showIndicator(true)
                                                                .icon(Image(systemName: "checkmark"))
                                                                .disabled(true)
                                                            }
                                                        }
                                                        
                                                            

States and variants

Appearance variants

Layout variants

Button states

Customization

Best practices

• Use the primary appearance for the most important action in a view.
• Reserve the danger appearance for actions that are irreversible or could result in data loss.
• Choose the button layout that fits best with your layout and design considerations.
• Always provide a meaningful title that clearly indicates the action the button performs.

Accessibility

This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• Provide meaningful accessibility labels that describe the element's purpose.
• Use accessibility hints to provide additional context when needed.
• Ensure all interactive elements are accessible.

                                                        
                                                        
                                                            BB.Button(text: "Submit") {
                                                            // Handle action
                                                        }
                                                        .accessibilityLabel("Submit form")
                                                        .accessibilityHint("Double tap to submit your information")
                                                        
                                                            

Dependencies

• External dependencies: None
• Internal dependencies: BackbaseDesignSystem

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:

• theme.color.button.primary: Primary button variant colors
• theme.color.button.secondary: Secondary button variant colors
• theme.color.button.tertiary: Tertiary button variant colors
• theme.color.button.success: Success button variant colors
• theme.color.button.danger: Danger button variant colors

Default state tokens (primary example):

Pressed state tokens:

Dimension tokens:

Semantic tokens

These tokens are accessed via the public DesignSystem.shared API.

See also

• BB.Chip - Compact interactive element for filtering
• BB.Badge - Non-interactive status indicator