Chips are compact elements that represent an attribute, action, or entity. Four types serve different interaction purposes.
Types
Assist chips
Add to calendar
Get directions
Filter chips
Selected
Purple
Green
Input chips
Design
Teal
Suggestion chips
Sounds good
On my way
Reply
Specs
| Property | Value | Token |
|---|---|---|
| Height | 32px | chip.height |
| Border radius | 100px | chip.radius |
| Label size | 13px/500 | chip.label |
| Selected bg | rgba(166,20,195,0.08) | color.primary-tint |
| Selected border | 1px solid #A614C3 | color.primary |
| Selected text | #A614C3 | color.primary |