All components
Data display
Severity pill
An inline severity chip — icon + band label, with an optional count. Backed by the four-step severity ramp.
Preview
Preview
light
Critical· 12High· 38Medium· 120Low· 208
dark
Critical· 12High· 38Medium· 120Low· 208
Code
<SeverityPill band="critical" count={12} />
<SeverityPill band="high" count={38} />Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
band | "critical" | "high" | "medium" | "low" | — | Severity level. |
count | number | — | Optional trailing count. |
Usage
Do
- Always pair the colour with the band icon + label.
Don't
- Use severity colours for non-severity meaning.