Chips
Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.
Overview · Specs · Guidelines · Accessibility
- Use chips to show options for a specific context
- Four variants: assist, filter, input, and suggestion
- Chip elevation defaults to 0 but can be elevated if they need more visual separation
- Assist chip
- Filter chip
- Input chip
- Suggestion chip
Availability & resources
| Type | Resource | Status |
|---|---|---|
| Design | Design Kit (Figma) | Available |
| Implementation | Flutter | Available |
| Implementation | Jetpack Compose | Available |
| Implementation | Android Views (MDC-Android) | Available |
| Implementation | Web | Available |
Updates
Aug 2024
Updated stroke color from outline to outline variant.
The stroke color was softened to improve visual hierarchy between chips and buttons
Differences from M2
- Color: New color mappings and compatibility with dynamic color
- Shape: Rounded rectangle
- Variants: Action chips have been separated into assist chips and suggestion chips. Choice chips are now a subset of filter chips
M2: Variants of chips are input, choice, filter, and action chips
M3: Variants of chips updated to assist, filter, input, and suggestion chips