Chips

Chips help people enter information, make selections, filter content, or trigger actions.

Chips

• Availability & resources

• Updates

• Differences from M2

• Use chips to show options for a specific context

• Four variants: assist Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen. , filter Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes. , input Input chips represent discrete pieces of information entered by a user, such as Gmail contacts or filter options within a search field. , and suggestion Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as suggested responses or search filters.

• Chip elevation Elevation is the distance between two surfaces on the z-axis.

1. Assist chip
2. Filter chip
3. Input chip
4. Suggestion chip

Availability & resources

Updates

Aug 2024 Updated stroke color from outline to outline variant.

Differences from M2

• Color: New color mappings and compatibility with dynamic color. Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.

• Shape: Rounded rectangle.

• Variants: Action chips have been separated into assist chips. Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen. and suggestion chips. Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as suggested responses or search filters. Choice chips are now a subset of filter chips. Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes.