Chip
A small pill-shaped element that represents an input, attribute, selection, or filter, often interactive.
Chips group several related ideas: filter chips toggle a filter on or off, input chips represent selected items in a multi-select, assist chips trigger an action, suggestion chips offer quick replies. Material Design formalized all four variants under one component. Web design systems often call the same element a 'tag' or 'pill'. Visually they are short, rounded, and usually have a colored or outlined background.
Also called
tagpilllabelfilter chip
When to use
- Filtering a list by category or attribute
- Showing selected items in a multi-select (with remove buttons)
- Quick reply or quick action suggestions
- Compact metadata labels on cards
When not to use
- Static labels with no interaction (a plain text label or badge is fine)
- Primary navigation (use tabs or a menu)
- Long text that doesn't fit in a compact pill
Related
Source
Material Design ('Chips') is the canonical reference, with four explicit variants. Web vernacular often uses 'tag' or 'pill' for the same idea. Radix and Shadcn ship related primitives ('Toggle Group', 'Badge').