Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package.
Kotlin
If you need to reference the BackbaseButton component in your Kotlin code, import it at the top of your file.
import com.backbase.android.design.button.BackbaseButton
XML
Components work automatically in XML files if the component path matches the installed package.
<com.backbase.android.design.button.BackbaseButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
Usage
Basic usage
Use BackbaseButton with predefined styles in XML layouts. The component extends MaterialButton providing full access to the MaterialButton API.
<!-- Basic button with primary style -->
<com.backbase.android.design.button.BackbaseButton
style="?buttonStylePrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
Advanced usage
<!-- Button with icon and custom configuration -->
<com.backbase.android.design.button.BackbaseButton
style="?buttonStyleSuccess"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit"
app:icon="?iconAdd"
android:enabled="true" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
android:enabled Button interactivity state |
Boolean |
true |
|
android:text Button text content |
String |
"" |
|
app:icon Leading icon drawable |
Drawable |
null |
|
loading Loading state with progress indicator |
Boolean |
false |
|
style Predefined button style |
Style Resource |
?buttonStylePrimary |
android:enabled
The android:enabled attribute controls button interactivity and applies disabled styling.
<!-- Disabled button -->
<com.backbase.android.design.button.BackbaseButton
android:enabled="false"
android:text="Disabled Button" />
android:text
The android:text attribute sets the button's text content.
<!-- Button with custom text -->
<com.backbase.android.design.button.BackbaseButton
android:text="Custom Text" />
app:icon
The app:icon attribute adds a leading icon using design system icon tokens.
<!-- Button with icon -->
<com.backbase.android.design.button.BackbaseButton
android:text="With Icon"
app:icon="?iconAdd" />
loading
The loading property displays a circular progress indicator and disables user interaction.
// Control loading state in Kotlin
val button: BackbaseButton = findViewById(R.id.button)
button.loading = true
// Stop loading
button.loading = false
Styling
Predefined styles
The BackbaseButton provides several predefined styles using the style attribute. Always use predefined styles without custom modifications to ensure consistency.
|
Description |
API |
|---|---|
Primary button |
?buttonStylePrimary |
Secondary button |
?buttonStyleSecondary |
Tertiary button |
?buttonStyleTertiary |
Success / confirmation button |
?buttonStyleSuccess |
Destructive action button |
?buttonStyleDanger |
Small Button variants
Use small button styles for compact layouts.
|
Description |
API |
|---|---|
Small primary button |
?buttonStyleSmallPrimary |
Small secondary button |
?buttonStyleSmallSecondary |
Small tertiary button |
?buttonStyleSmallTertiary |
Small success button |
?buttonStyleSmallSuccess |
Small danger button |
?buttonStyleSmallDanger |
On color variants
Use the buttonOnColorThemeOverlay on parent layouts for buttons on dark backgrounds.
<!-- Button on colored background -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?colorBackgroundBrand"
android:theme="?buttonOnColorThemeOverlay">
<com.backbase.android.design.button.BackbaseButton
style="?buttonStylePrimary"
android:text="On Color Button" />
</LinearLayout>
States
Loading
Display loading state using the loading property in Kotlin code.
// Start loading state
val button: BackbaseButton = findViewById(R.id.submit_button)
button.loading = true
// Stop loading state
button.loading = false
Disabled
Control button state using the enabled property or XML attribute.
// Disable button in code
button.isEnabled = false
// Enable button
button.isEnabled = true
<!-- Disabled button in XML -->
<com.backbase.android.design.button.BackbaseButton
android:enabled="false"
android:text="Disabled" />
Events
Button uses standard Android click listeners for handling user interactions.
// Set click listener
val button: BackbaseButton = findViewById(R.id.button)
button.setOnClickListener {
// Handle button click
Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show()
}
Accessibility
Best practices
- Button automatically provides appropriate accessibility traits
- Loading state is communicated through state descriptions
- Disabled state is properly conveyed to accessibility services
// Configure accessibility
button.contentDescription = "Submit form button"
Design tokens
The BackbaseButton uses comprehensive design tokens for theming all button variants through 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