Import
Jetpack Compose framework
To use the Button component in your Jetpack Compose project, import the necessary components at the top of your file.
// Import experimental design system
import com.backbase.android.design.ExperimentalDesignSystem
// Import Button component and related classes
import com.backbase.android.design.component.Button
import com.backbase.android.design.component.ButtonColorScheme
import com.backbase.android.design.component.ButtonColorSchemes
import com.backbase.android.design.component.ButtonLayouts
Usage
Basic usage
Create a Button composable with text and an onClick lambda.
// Basic button usage
Button(
text = "Click Me",
onClick = { /* Handle click */ }
)
Advanced usage
// Button with advanced configuration
Button(
text = "Submit",
colorScheme = ButtonColorSchemes.success,
layout = ButtonLayouts.small,
enabled = true,
inProgress = false,
contentDescription = "Submit form",
icon = painterResource(id = R.drawable.ic_add),
onClick = { /* Handle submission */ }
)
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
colorScheme Button color scheme |
ButtonColorScheme |
ButtonColorSchemes.primary |
|
contentDescription Accessibility description |
String |
text |
|
enabled Button interactivity state |
Boolean |
true |
|
icon Optional leading icon |
Painter? |
null |
|
inProgress Loading state indicator |
Boolean |
false |
|
layout Button size layout |
ButtonLayout |
ButtonLayouts.medium |
|
modifier Compose modifier chain |
Modifier |
Modifier |
|
onClick Click event handler |
() -> Unit |
Required |
|
text Button text content |
String |
Required |
colorScheme
The colorScheme parameter applies predefined color styling to the button.
// Button with success color scheme
Button(
text = "Success",
colorScheme = ButtonColorSchemes.success,
onClick = { /* Action */ }
)
enabled
The enabled parameter controls button interactivity and applies appropriate styling.
// Disabled button
Button(
text = "Disabled Button",
enabled = false,
onClick = { /* Action */ }
)
icon
The icon parameter adds a leading icon to the button.
// Button with icon
Button(
text = "With Icon",
icon = painterResource(id = R.drawable.ic_add),
onClick = { /* Action */ }
)
inProgress
The inProgress parameter displays a circular progress indicator and disables interaction.
// Button with loading state
Button(
text = "Loading",
inProgress = true,
onClick = { /* Action */ }
)
layout
The layout parameter controls the button's size and spacing.
// Small button layout
Button(
text = "Small Button",
layout = ButtonLayouts.small,
onClick = { /* Action */ }
)
text
The text parameter sets the button's text content.
// Button with custom text
Button(
text = "Custom Text",
onClick = { /* Action */ }
)
Styling
Predefined color schemes
The Button provides several predefined color schemes using the colorScheme parameter. Always use predefined schemes to ensure consistency.
|
Description |
API |
|---|---|
Primary button |
ButtonColorSchemes.primary |
Secondary button |
ButtonColorSchemes.secondary |
Tertiary button |
ButtonColorSchemes.tertiary |
Success / confirmation button |
ButtonColorSchemes.success |
Destructive action button |
ButtonColorSchemes.danger |
Layout sizes
Control button size using the layout parameter.
|
Small button layout |
Medium button layout (default) |
|---|---|
Small primary button |
Medium primary button |
// Small button layout
Button(
text = "Small",
layout = ButtonLayouts.small,
onClick = { /* Action */ }
)
// Medium button layout (default)
Button(
text = "Medium",
layout = ButtonLayouts.medium,
onClick = { /* Action */ }
)
On color variants
Use these color schemes when buttons are placed on darker backgrounds for proper contrast.
|
Description |
API |
|---|---|
Primary button for colored backgrounds |
ButtonColorSchemes.primaryOnColor |
Secondary button for colored backgrounds |
ButtonColorSchemes.secondaryOnColor |
Tertiary button for colored backgrounds |
ButtonColorSchemes.tertiaryOnColor |
States
Loading
Display a loading indicator using the inProgress parameter.
// Button with loading state
@Composable
fun LoadingButtonExample() {
var isLoading by remember { mutableStateOf(false) }
Button(
text = "Submit",
inProgress = isLoading,
onClick = {
isLoading = true
// Perform async operation
}
)
}
Disabled
Control button state using the enabled parameter.
// Disabled button
@Composable
fun DisabledButtonExample() {
var isEnabled by remember { mutableStateOf(false) }
Button(
text = "Disabled Button",
enabled = isEnabled,
onClick = { /* Action */ }
)
}
Events
Button uses lambda-based event handling for click actions.
// Button with click handler
Button(
text = "Click Me",
onClick = {
// Handle button click
println("Button was clicked!")
}
)
Accessibility
Accessibility configuration
The Button automatically provides proper accessibility semantics and supports custom content descriptions.
Best practices
- Button automatically uses text as accessibility label
- Custom contentDescription can provide additional context
- Loading and disabled states are properly communicated to accessibility services
// Button with accessibility configuration
Button(
text = "Submit",
contentDescription = "Submit contact form",
onClick = { /* Action */ }
)
Design tokens
Component tokens are applied automatically through the predefined color schemes and layouts and can be customized via the global theme.
Token Groups used by BackbaseButton:
- color/button/primary: Background, foreground, and border colors for primary buttons
- color/button/secondary: Background, foreground, and border colors for secondary buttons
- color/button/tertiary: Background, foreground, and border colors for tertiary buttons
- color/button/success: Background, foreground, and border colors for success buttons
- color/button/danger: Background, foreground, and border colors for danger buttons
- color/button/disabled: Colors for disabled state
- color/button/on-color-*: Colors for buttons on colored backgrounds