Import
Jetpack Compose framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
import com.backbase.android.design.component.StateView
import com.backbase.android.design.component.StateViewPresets
import com.backbase.android.design.ExperimentalDesignSystem
Usage
Basic usage
Create a state view with customizable content and actions.
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun BasicStateView() {
StateView(
graphic = {
Image(
painter = Illustrations.Painter.stateViewNoResultsFoundIcon,
contentDescription = null
)
},
labelPrimaryText = "No Results Found",
labelSecondaryText = "Try adjusting your search criteria"
)
}
Advanced usage
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun AdvancedStateView() {
StateView(
graphic = {
Image(
painter = Illustrations.Painter.stateViewLoadingFailedIcon,
contentDescription = null
)
},
labelPrimaryText = "Something went wrong",
labelSecondaryText = "Please try again or contact support",
primaryButton = {
Button(
text = "Try Again",
colorScheme = ButtonColorSchemes.primary,
onClick = { /* Retry action */ },
modifier = Modifier.fillMaxWidth()
)
},
secondaryButton = {
Button(
text = "Contact Support",
colorScheme = ButtonColorSchemes.secondary,
onClick = { /* Support action */ },
modifier = Modifier.fillMaxWidth()
)
},
tertiaryButton = {
Button(
text = "Cancel",
colorScheme = ButtonColorSchemes.tertiary,
onClick = { /* Cancel action */ },
modifier = Modifier.fillMaxWidth()
)
}
)
}
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
graphic |
@Composable () -> Unit |
Required |
|
labelPrimaryText |
String |
Required |
|
labelSecondaryText |
String? |
null |
|
modifier |
Modifier |
Modifier |
|
primaryButton |
(@Composable () -> Unit)? |
null |
|
secondaryButton |
(@Composable () -> Unit)? |
null |
|
tertiaryButton |
(@Composable () -> Unit)? |
null |
graphic
The main visual element displayed in the state view. Typically an Image composable.
StateView(
graphic = {
Image(
painter = Illustrations.Painter.stateViewNoResultsFoundIcon,
contentDescription = null
)
},
labelPrimaryText = "No Results"
)
labelPrimaryText
The primary text message displayed in the state view.
StateView(
graphic = { /* graphic content */ },
labelPrimaryText = "Connection Failed"
)
labelSecondaryText
Optional secondary text message displayed below the primary text.
StateView(
graphic = { /* graphic content */ },
labelPrimaryText = "Connection Failed",
labelSecondaryText = "Please check your internet connection and try again"
)
primaryButton
Optional primary action button composable.
StateView(
graphic = { /* graphic content */ },
labelPrimaryText = "Error",
primaryButton = {
Button(
text = "Retry",
colorScheme = ButtonColorSchemes.primary,
onClick = { /* retry logic */ },
modifier = Modifier.fillMaxWidth()
)
}
)
secondaryButton
Optional secondary action button composable.
StateView(
graphic = { /* graphic content */ },
labelPrimaryText = "Error",
primaryButton = { /* primary button */ },
secondaryButton = {
Button(
text = "Cancel",
colorScheme = ButtonColorSchemes.secondary,
onClick = { /* cancel logic */ },
modifier = Modifier.fillMaxWidth()
)
}
)
tertiaryButton
Optional tertiary action button composable.
StateView(
graphic = { /* graphic content */ },
labelPrimaryText = "Error",
primaryButton = { /* primary button */ },
secondaryButton = { /* secondary button */ },
tertiaryButton = {
Button(
text = "Help",
colorScheme = ButtonColorSchemes.tertiary,
onClick = { /* help logic */ },
modifier = Modifier.fillMaxWidth()
)
}
)
Predefined state views
Loading failed preset
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun LoadingFailedExample() {
StateViewPresets.LoadingFailed(
tryAgain = { /* retry logic */ }
)
}
// With custom text
StateViewPresets.LoadingFailed(
tryAgain = { /* retry logic */ },
labelPrimaryText = "Failed to Load",
labelSecondaryText = "Something went wrong while loading the content",
tryAgainButtonText = "Try Again"
)
No internet connection preset
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun NoInternetConnectionExample() {
StateViewPresets.NoInternetConnection(
tryAgain = { /* retry connection */ }
)
}
// With custom text
StateViewPresets.NoInternetConnection(
tryAgain = { /* retry connection */ },
labelPrimaryText = "No Internet Connection",
labelSecondaryText = "Please check your connection and try again",
tryAgainButtonText = "Retry"
)
No result found preset
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun NoResultFoundExample() {
StateViewPresets.NoResultFound()
}
// With custom text
StateViewPresets.NoResultFound(
labelPrimaryText = "No Items Found",
labelSecondaryText = "Try adjusting your search criteria"
)
Styling
Color scheme
The StateView uses internal color schemes for consistent theming:
- Primary label color: Automatically applied from theme
- Secondary label color: Automatically applied from theme
Layout configuration
The StateView uses internal layout configuration for spacing:
- Label to icon padding: Consistent spacing between graphic and text
- Label secondary vertical padding: Spacing around secondary text
- Actions to label padding: Spacing between text and buttons
- Action vertical padding: Spacing between multiple buttons
Custom styling
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun CustomStyledStateView() {
StateView(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
graphic = {
Image(
painter = Illustrations.Painter.stateViewNoResultsFoundIcon,
contentDescription = null,
modifier = Modifier.size(120.dp)
)
},
labelPrimaryText = "Custom State",
labelSecondaryText = "This state view has custom styling applied"
)
}
Events
Button actions
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun StateViewWithActions() {
StateView(
graphic = { /* graphic content */ },
labelPrimaryText = "Action Required",
primaryButton = {
Button(
text = "Primary Action",
onClick = {
// Handle primary action
Log.d("StateView", "Primary action clicked")
}
)
},
secondaryButton = {
Button(
text = "Secondary Action",
onClick = {
// Handle secondary action
Log.d("StateView", "Secondary action clicked")
}
)
}
)
}
Accessibility
Accessibility configuration
The StateView automatically provides accessibility support for its components.
@OptIn(ExperimentalDesignSystem::class)
@Composable
fun AccessibleStateView() {
StateView(
graphic = {
Image(
painter = Illustrations.Painter.stateViewNoResultsFoundIcon,
contentDescription = null // Decorative images should have null contentDescription
)
},
labelPrimaryText = "No Results Found",
labelSecondaryText = "Try adjusting your search criteria",
primaryButton = {
Button(
text = "Search Again",
onClick = { /* search action */ }
// Button automatically handles accessibility
)
}
)
}
Best practices
- Set contentDescription = null for decorative graphics to avoid redundancy
- Primary and secondary text are automatically accessible to screen readers
- Button accessibility is handled by the Button component
- Provide clear, descriptive text that explains the current state
- Ensure button text clearly describes the action that will be performed
Design tokens
The component uses Backbase design tokens for consistent theming:
Token group stateView:
- primaryLabelColor: Primary text color from theme
- secondaryLabelColor: Secondary text color from theme
- labelPrimaryToIconPadding: Spacing between graphic and primary text
- labelSecondaryVerticalPadding: Vertical padding around secondary text
- actionsToLabelSecondaryPadding: Spacing between text and button section
- actionVerticalPadding: Spacing between multiple buttons