'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Components · Chip
Chip
Compact label, filter, status, or dismissible value.
Anatomy
- 1
.chip-rootChip surface. - 2
.chip-delete-triggerOptional remove action.
Variants
- Assist
- Filter
- Input
- Suggestion
Material 3
DefaultCompositions
The component in context, beside others. Open the code to see the file verbatim.
When to use
Use chips for compact actions, filters, suggestions, or entered values that belong together in a set.
Interaction states →