Import
Jetpack Compose framework
Import the Chip composable function in your Compose file.
import com.backbase.android.design.component.Chip
Usage
Basic usage
Create a Chip composable with text and optional configuration parameters.
// Basic chip with text only
Chip(text = "Filter")
Advanced usage
// Chip with icon, content description, and dismiss functionality
Chip(
text = "Favorite",
modifier = Modifier.padding(8.dp),
contentDescription = "Favorite filter chip",
icon = painterResource(id = R.drawable.ic_star),
onDismiss = {
// Handle chip dismissal
println("Chip dismissed")
},
selected = false,
onClick = {
// Handle chip on click
println("Chip clicked")
}
)
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
contentDescription |
String |
text |
|
icon |
Painter? |
null |
|
modifier |
Modifier |
Modifier |
|
onDismiss |
(() -> Unit)? |
null |
|
text |
String |
Required |
|
selected |
Bolean |
false |
contentDescription
The contentDescription parameter sets the accessibility description for screen readers.
// Chip with custom content description
Chip(
text = "Filter",
contentDescription = "Apply category filter"
)
icon
The icon parameter sets an optional icon to be displayed on the leading edge of the chip.
// Chip with leading icon
Chip(
text = "Tagged",
icon = painterResource(id = R.drawable.ic_tag)
)
modifier
The modifier parameter allows customization of the chip's layout and appearance.
// Chip with custom modifier
Chip(
text = "Custom",
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
)
onDismiss
The onDismiss parameter sets an optional closure that is called when the dismiss button is tapped. If null, the dismiss button is hidden.
// Chip with dismiss functionality
Chip(
text = "Dismissible",
onDismiss = {
// Handle chip dismissal
removeChip()
}
)
text
The text parameter sets the text content to be displayed in the chip.
// Chip with specific text
Chip(text = "Category Name")
Styling
Automatic theming
The Chip automatically applies design tokens through the ChipLayout and ChipColorScheme classes provided by the design system.
// Chip uses automatic theming from design system
Chip(text = "Themed Chip")
// Automatically applies colors, typography, spacing from theme
Layout configuration
The Chip uses ChipLayout for consistent sizing and spacing across the application.
|
Layout property |
Usage |
Default value |
|---|---|---|
|
borderWidth |
Border thickness |
1.dp |
|
clearIconSize |
Dismiss icon size |
18x18.dp |
|
contentPadding |
Internal padding |
8.dp all sides |
|
iconSize |
Leading icon size |
24x24.dp |
|
minHeight |
Minimum chip height |
32.dp |
|
minWidth |
Minimum chip width |
0.dp |
Color configuration
The Chip uses ChipColorScheme for consistent coloring across the application.
|
Color property |
Usage |
Default value |
|---|---|---|
|
backgroundColor |
Container background |
Theme.colors.background.brandSubtle |
|
borderColor |
Border color |
Theme.colors.onBackground.brandSubtle |
|
clearIconTint |
Dismiss icon tint |
Theme.colors.onBackground.brandSubtle |
|
iconTint |
Leading icon tint |
Theme.colors.onBackground.brandSubtle |
|
textColor |
Text color |
Theme.colors.onBackground.brandSubtle |
|
selectedBackgroundColor |
Container background (when selected is true) |
Theme.colors.background.brandSubtle |
|
selectedBorderColor |
Border color (when selected is true) |
Theme.colors.onBackground.brandSubtle |
|
selectedTextColor |
Text color (when selected is true) |
Theme.colors.onBackground.brandSubtle |
|
selectedIconTint |
Leading icon tint (when selected is true) |
Theme.colors.onBackground.brandSubtle |
Layout
Icon and text layout
The Chip automatically manages layout between icon, text, and dismiss button using Row composition.
// Chip with all elements
Chip(
text = "User",
icon = painterResource(id = R.drawable.ic_person),
onDismiss = { /* dismiss handler */ }
)
// Layout: [Icon] [Spacer] [Text] [Spacer] [Dismiss Button]
Text constraints
The Chip automatically constrains text to a single line with ellipsis overflow.
// Chip with long text
Chip(text = "This is a very long chip text that will be truncated")
// Text automatically truncated with ellipsis
States
Interactive states
The Chip responds to dismiss actions through the onDismiss parameter.
// Interactive chip with state management
@Composable
fun InteractiveChipExample() {
var showChip by remember { mutableStateOf(true) }
if (showChip) {
Chip(
text = "Remove Me",
onDismiss = {
showChip = false
}
)
}
}
Dismissible state
// Conditionally dismissible chip
@Composable
fun ConditionalChipExample() {
var isDismissible by remember { mutableStateOf(true) }
Chip(
text = "Toggle Dismissible",
onDismiss = if (isDismissible) {
{ /* handle dismiss */ }
} else null
)
}
Events
Chip uses lambda-based event handling for dismiss actions.
// Chip with dismiss event handling
Chip(
text = "Interactive Chip",
icon = painterResource(id = R.drawable.ic_star),
onDismiss = {
// Handle dismiss action
println("Chip was dismissed")
// Perform cleanup or state updates
}
)
Accessibility
Automatic accessibility support
The Chip automatically provides proper accessibility semantics through Compose and Material Design integration.
Best practices
- Chip automatically uses text as accessibility label
- Custom contentDescription can provide additional context
- Dismiss button has appropriate accessibility role and interactions
- Icon and text elements are properly merged for screen readers
// Chip with enhanced accessibility
Chip(
text = "Category Filter",
contentDescription = "Filter items by category, dismissible",
icon = painterResource(id = R.drawable.ic_filter),
onDismiss = { /* dismiss action */ }
)
Semantic properties
// Chip with explicit semantic properties
Chip(
text = "Important",
modifier = Modifier.semantics {
contentDescription = "Important filter chip"
role = Role.Button
},
onDismiss = { /* dismiss */ }
)
Design tokens
Component styling is applied automatically through the design system's theming infrastructure using ChipLayout and ChipColorScheme classes.
Token integration:
- Layout: ChipLayout class manages minHeight, minWidth, contentPadding, borderWidth, iconSize, clearIconSize, spaceBetweenIconAndText, and spaceBetweenTextAndClearIcon
- Colors: ChipColorScheme class manages textColor, backgroundColor, borderColor, iconTint, and clearIconTint
- Typography: Integrated text styling through Theme.typography.body1.regular
- Shape: Automatic rounded corners using RoundedCornerShape(size = Theme.radii.max)
- Spacing: Automatic spacing between elements using layout tokens