Chip & tag
A small clickable pill. Used for filters, attachments, and removable tags. If you can't click it, it's a badge.
Usage
A chip is a small clickable pill — 28 px tall, hairline border, 6 px gap to the icon.
States
Rest
Hover
Selected
Disabled
Filter chips
The standing pattern at the top of a data table — a row of chips, each opening a popover. Active filters are filled.
Removable tags
A chip with a close button — used inside Selected filters and on attachment lists.
Anatomy
| Property | Value | Notes |
|---|---|---|
| height | 28 px | — |
| padding | 0 10 px | 6 right for removable |
| radius | --radius-md (8 px) | Not pill |
| icon | 14 px · text-muted | Caret 12 px |
| hover | --surface-muted | — |
| selected | --brand-soft + brand fg | — |
Do & don't
Do
Chip away. Filter chips can stack — each chip narrows the result set.
Don't
Use chips for primary actions. They are 28 px, too small to be the focal point.
Do
Show selected filters as filled chips below the toolbar. The user should see what they applied.
Don't
Mix chips and tabs in the same row. Pick one navigation pattern.
Code
<button class="chip"> <span data-icon="filter"></span>Category <span class="caret" data-icon="chevron"></span> </button>