Components
Chips
A compact pill for filters, choices and entered values. It can toggle, show a key and be removed.
Playground
Figma variant
💅 Style=Default
👕 Size=Medium
Select=False
Show Icon=False
Show Icon (R)=False
Key=False
Remove=FalseVariants
Five tones. Unselected chips use the soft tone with shade text; selected chips use the tone with its on-color. Default turns primary soft when selected.
DefaultPrimarySuccessErrorWarning
DefaultPrimarySuccessErrorWarning
Sizes
Medium and Small use the body text, Tiny the small text, Micro the footnote.
MediumSmallTinyMicro
| Size | Height | Pill padding | Text padding | Text | Icon |
|---|---|---|---|---|---|
| medium | 40px | --space-micro | --space-micro --space-small | ui/text/regular | 20px |
| small | 32px | --space-micro 6px | 0 --space-tiny | ui/text/regular | 16px |
| tiny | 24px | 0 --space-atom | --space-micro | ui/text small/regular | 12px |
| micro | 16px | 0 --space-atom | --space-atom --space-micro | ui/footnote/regular | 12px |
Key and remove
A key part sits before the text (for filters like “Status: Active”); the remove button sits after it.
StatusActiveStatusDoneIstanbul
Tokens
| State | Background | Text | Key background / text |
|---|---|---|---|
| default | --color-surface-level-3 | --color-foreground-high-emphasis | --color-surface-level-4 / --color-foreground-high-emphasis |
| default selected | --color-primary-soft | --color-primary | --color-surface-level-4 / --color-foreground-high-emphasis |
| {tone} | --color-{tone}-soft | --color-{tone}-shade | --color-{tone}-shade / --color-{tone}-soft |
| {tone} selected | --color-{tone} | --color-on-{tone} | --color-surface-level-4 / --color-foreground-high-emphasis |
Notes from Figma
- The key text is Neue Haas Grotesk Text Pro 14 Medium, outside the type scale and the font variable. Code uses the bold UI style of each size (ui/text/bold, ui/text small/bold, ui/footnote/bold).
- Every selected chip keeps the neutral key (surface/level-4 with high-emphasis text), whatever its tone.
- Figma has no hover, focus or disabled state. Code adds the primary focus ring for keyboard users.
- The remove icon is Icon/clear, as in Figma.
- Primary Micro unselected pads the pill 2px on all sides and the text 0 4px, while the others pad the pill 0 2px and the text 2px 4px; both come out 16px tall.
Figma to code
| Figma | React |
|---|---|
| 💅 Style = Default / Primary / Success / Danger / Warning | tone='default' / 'primary' / 'success' / 'error' / 'warning' |
| 👕 Size = Medium / Small / Tiny / Micro | size='medium' / 'small' / 'tiny' / 'micro' |
| Select = True | selected |
| Key + ⮑ Key | keyLabel="…" |
| Show Icon / Show Icon (R) | iconLeft={<Icon… />} / iconRight={<Icon… />} |
| Remove = True | onRemove={…} |