Import
Jetpack Compose framework
Import the Badge composable function in your Compose file.
import com.backbase.android.design.component.Badge
import com.backbase.android.design.component.BadgeColorSchemes
Usage
Basic usage
Create a Badge composable with text and optional configuration parameters.
// Basic badge with default neutral color scheme
Badge(text = "New")
Advanced usage
// Badge with custom configuration
Badge(
text = "Warning",
modifier = Modifier.padding(8.dp),
contentDescription = "Warning notification",
colorScheme = BadgeColorSchemes.warning
)
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
colorScheme |
BadgeColorScheme |
BadgeColorSchemes.neutral |
|
contentDescription |
String |
text |
|
modifier |
Modifier |
Modifier |
|
text |
String |
Required |
colorScheme
The colorScheme parameter sets the visual appearance using predefined color schemes for different semantic meanings.
// Badge with info color scheme
Badge(
text = "Information",
colorScheme = BadgeColorSchemes.info
)
contentDescription
The contentDescription parameter sets the accessibility description for screen readers.
// Badge with custom content description
Badge(
text = "5",
contentDescription = "5 unread messages"
)
modifier
The modifier parameter allows customization of the badge's layout and appearance.
// Badge with custom modifier
Badge(
text = "Status",
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth()
)
text
The text parameter sets the text content to be displayed in the badge.
// Badge with specific text content
Badge(text = "Updated")
Styling
Color schemes
The Badge provides five predefined color schemes for different semantic meanings.
|
|
Color scheme |
Usage |
|---|---|---|
Neutral style
|
BadgeColorSchemes.neutral |
Standard neutral styling |
Informational content |
BadgeColorSchemes.info |
Info-themed styling |
Positive feedback |
BadgeColorSchemes.success |
Success-themed styling |
Caution alerts |
BadgeColorSchemes.warning |
Warning-themed styling |
Error states |
BadgeColorSchemes.danger |
Red-themed styling |
// Different badge color schemes
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Badge(text = "Neutral", colorScheme = BadgeColorSchemes.neutral)
Badge(text = "Info", colorScheme = BadgeColorSchemes.info)
Badge(text = "Success", colorScheme = BadgeColorSchemes.success)
Badge(text = "Warning", colorScheme = BadgeColorSchemes.warning)
Badge(text = "Danger", colorScheme = BadgeColorSchemes.danger)
}
Layout customization
// Badge with layout customization
Badge(
text = "Custom Layout",
modifier = Modifier
.padding(16.dp)
.wrapContentWidth()
.defaultMinSize(minHeight = 32.dp),
colorScheme = BadgeColorSchemes.success
)
States
Text constraints
The Badge automatically constrains text to a single line with appropriate truncation.
// Badge with single-line text constraint
Badge(
text = "This is a very long text that will be constrained to one line",
colorScheme = BadgeColorSchemes.neutral
)
Fixed sizing
The Badge uses fixed sizing to maintain consistent dimensions.
// Badge maintains consistent sizing
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Badge(text = "Short")
Badge(text = "Longer text")
Badge(text = "X")
}
Accessibility
Best practices
- Badge automatically provides semantic accessibility through Compose
- Content description is set by default to the badge text
- Custom content descriptions can provide more context for screen readers
// Badge with enhanced accessibility
Badge(
text = "3",
contentDescription = "3 new notifications available",
colorScheme = BadgeColorSchemes.info
)
Semantic properties
// Badge with explicit semantic properties
Badge(
text = "Error",
contentDescription = "Error state - action required",
colorScheme = BadgeColorSchemes.danger,
modifier = Modifier.semantics {
role = Role.Button // If badge is interactive
}
)
Design tokens
Component styling is applied automatically through the design system's theming infrastructure using BadgeLayout and BadgeColorScheme classes.
Token integration:
- Layout: BadgeLayout class manages minHeight, cornerRadius, contentPadding, and typography
- Colors: BadgeColorScheme class manages textColor and backgroundColor
- Typography: Integrated text styling through layout tokens
- Spacing: Automatic content padding and minimum height constraints