Badges & Chips
Badges label and categorise information; chips are compact, dismissible tags. Both consume the --badge & chip/* token namespace, so the live customiser re-themes them automatically.
Badge — Size
Three sizes. Inter Medium 14 / 12 / 11px. Radius 4px (border/border-radius/sm).
Badge — Type
Filled uses the bg-box fill; Outline draws a 1px outline border on transparent; Clear is text only.
Badge — Color
Primary is a solid fill; Red / Green / Orange use a 10%-opacity tinted bg-box with vivid text.
Badge — Variation
Optional leading dot or leading icon. The dot and icon inherit the badge text colour via currentColor.
Chip — Size
Compact, dismissible tags. Radius 8px, gap 4px, trailing 16px close icon. md / sm / xs.
Chip — Type
Filled and Outline, same as badges. Outline draws a coloured border on a transparent fill.
Chip — Color
Six colours: Primary, Red, Green, Orange, Grey, White. Click a chip below to dismiss it.
Token Reference
The waring spelling is an intentional carry-over from the Figma variable name.
| Token | Value | Usage |
|---|---|---|
| --badge & chip/primary/bg-box | #352eff | Primary fill (solid) |
| --badge & chip/primary/outline | #7c9dff | Primary outline border |
| --badge & chip/danger/bg-box | #ff00001a | Red tinted fill (10%) |
| --badge & chip/success/bg-box | #629c281a | Green tinted fill (10%) |
| --badge & chip/waring/bg-box | #ff84001a | Orange tinted fill (10%) |
| --badge & chip/white/bg-box | #e5e5e5 | Neutral chip fill |
| --border/border-radius/sm | 4px | Badge corner radius |
| --border/border-radius/md | 8px | Chip corner radius |