Chip
A small tinted label for things that earn a colour but are not a status: a role, “New”, the environment, a change figure. Neutral by default; brand only for the page's primary classification. RoleChip shows a role the same way everywhere; EnvironmentChip is the orange “STAGING”.
Tones, roles and environment
NeutralNew+9.4%72% used94% usedPrimarySMS
OwnerAdminViewerStaging
When to use
- Roles, “New” beside a nav item, usage that can run out, +9.4% / −2.3%.
Not for
- A state — use StatusPill.
- Rainbow colours per value.
- More than two tags in a row.
Props
Chip
| Prop | Type | Description |
|---|---|---|
| tone | "neutral" | "info" | "success" | "warning" | "critical" | "brand" Default "neutral" | Stripe's badge pairs, plus the brand. |
| icon | ComponentType | A 12px icon, only when it adds meaning. |
| children | ReactNode | The label. |
| className | string | Extra classes on the outer element. |
RoleChip
| Prop | Type | Description |
|---|---|---|
| role | string | OWNER (brand), ADMIN (info), or your own from KitProvider roles. |
| labels / tones | Record<string, …> | Per-chip overrides. |