All components
Data display
Chip
A palette-aware pill. Meaning is carried by state colour; each variant re-skins per theme. Optional dot and pulse.
Preview
Preview
light
NeutralAccentInfoHealthyWarningCritical
dark
NeutralAccentInfoHealthyWarningCritical
Code
<Chip variant="accent" dot>Accent</Chip>
<Chip variant="ok" dot>Healthy</Chip>
<Chip variant="danger" pulse>Critical</Chip>Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "neutral" | "accent" | "info" | "ok" | "warn" | "danger" | "neutral" | State colour. |
dot | boolean | false | Leading colour dot. |
pulse | boolean | false | Pulse for active states. |
mono | boolean | false | Monospace + tabular. |
Usage
Do
- Use the variant that matches the meaning (ok/warn/danger).
Don't
- Invent new colours for chips.