Import
Jetpack Compose framework
Add the Emblem to your composable functions by importing the design system components.
import com.backbase.android.design.component.Emblem
import com.backbase.android.design.component.EmblemColorSchemes
import com.backbase.android.design.component.EmblemLayouts
Usage
Basic usage
Create an Emblem with a painter and content description.
// Basic emblem with default brand color scheme and medium layout
Emblem(
painter = painterResource(id = R.drawable.ic_star),
contentDescription = "Star icon"
)
Advanced usage
// Emblem with custom color scheme, layout, and content scale
Emblem(
painter = painterResource(id = R.drawable.ic_credit_card),
contentDescription = "Credit card",
colorScheme = EmblemColorSchemes.info,
layout = EmblemLayouts.lg,
contentScale = ContentScale.Fit,
modifier = Modifier.padding(16.dp)
)
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
colorScheme |
EmblemColorScheme |
EmblemColorSchemes.brand |
|
contentDescription |
String? |
Required |
|
contentScale |
ContentScale |
ContentScale.Fit |
|
layout |
EmblemLayout |
EmblemLayouts.md |
|
modifier |
Modifier |
Modifier |
|
painter |
Painter |
Required |
colorScheme
The visual appearance style of the emblem, determining background, border, and foreground colors.
// Different color schemes
Emblem(
painter = painterResource(R.drawable.ic_star),
contentDescription = "Star",
colorScheme = EmblemColorSchemes.brand
)
Emblem(
painter = painterResource(R.drawable.ic_info),
contentDescription = "Info",
colorScheme = EmblemColorSchemes.info
)
contentDescription
Accessibility description for screen readers.
// Provide meaningful descriptions
Emblem(
painter = painterResource(R.drawable.ic_favorite),
contentDescription = "Favorite item indicator"
)
contentScale
How the icon image scales within the emblem container.
// Different content scaling options
Emblem(
painter = painterResource(R.drawable.ic_image),
contentDescription = "Image",
contentScale = ContentScale.Fit
)
Emblem(
painter = painterResource(R.drawable.ic_image),
contentDescription = "Image",
contentScale = ContentScale.Crop
)
layout
The size configuration of the emblem, affecting container and icon dimensions.
// Different layout sizes
Emblem(
painter = painterResource(R.drawable.ic_star),
contentDescription = "Star",
layout = EmblemLayouts.sm
)
Emblem(
painter = painterResource(R.drawable.ic_star),
contentDescription = "Star",
layout = EmblemLayouts.xl
)
modifier
Standard Compose modifier for styling and layout adjustments.
// Apply modifiers for positioning and styling
Emblem(
painter = painterResource(R.drawable.ic_star),
contentDescription = "Star",
modifier = Modifier
.padding(8.dp)
.clickable { /* Handle click */ }
)
painter
The image painter to display within the emblem container.
// Different painter sources
Emblem(
painter = painterResource(R.drawable.ic_custom_icon),
contentDescription = "Custom icon"
)
Emblem(
painter = rememberAsyncImagePainter("https://example.com/icon.png"),
contentDescription = "Remote icon"
)
Styling
Predefined color schemes
The Emblem provides multiple predefined color schemes for different use cases.
|
Color scheme |
Description |
|---|---|
|
EmblemColorSchemes.brand |
Primary brand styling |
|
EmblemColorSchemes.neutral |
Neutral or secondary content |
|
EmblemColorSchemes.info |
Informational content |
|
EmblemColorSchemes.success |
Success states or positive actions |
|
EmblemColorSchemes.warning |
Warning states or caution |
|
EmblemColorSchemes.danger |
Error or destructive actions |
Category color schemes
Additional category-based color schemes for content classification.
|
Color scheme |
Description |
|---|---|
|
EmblemColorSchemes.category1 through EmblemColorSchemes.category10 |
Ten distinct category styles for content organization |
// Using category color schemes
Emblem(
painter = painterResource(R.drawable.ic_banking),
contentDescription = "Banking",
colorScheme = EmblemColorSchemes.category1
)
Emblem(
painter = painterResource(R.drawable.ic_investment),
contentDescription = "Investment",
colorScheme = EmblemColorSchemes.category2
)
Layout sizes
The Emblem supports four predefined layout sizes.
|
Layout |
Description |
|---|---|
|
EmblemLayouts.sm |
Compact size for dense layouts |
|
EmblemLayouts.md |
Standard size for most use cases |
|
EmblemLayouts.lg |
Prominent size for emphasis |
|
EmblemLayouts.xl |
Maximum size for high visibility |
Accessibility
Accessibility configuration
The Emblem requires a contentDescription for screen reader accessibility.
// Always provide meaningful content descriptions
Emblem(
painter = painterResource(R.drawable.ic_account),
contentDescription = "Account type indicator"
)
Best practices
- Always provide meaningful contentDescription values
- Use appropriate color schemes that convey semantic meaning
- Consider color contrast when choosing color schemes
- Ensure icons are recognizable at different layout sizes
- Test with TalkBack screen reader for accessibility compliance
Design tokens
The component uses Backbase design tokens for consistent theming:
Token group emblem:
- backgroundColor: Container background color based on color scheme
- borderColor: Border color for container outline
- borderWidth: Border thickness
- cornerRadius: Container corner radius
- foregroundColor: Icon tint color
- iconSize: Icon dimensions within container
- size: Overall emblem container dimensions