All components
Data display
Stat pill
A compact KPI cell — a labelled value with a tone keyline down the left edge.
Preview
Preview
light
Processed12,847
Auto-closed9,021
Review318
Escalated42
dark
Processed12,847
Auto-closed9,021
Review318
Escalated42
Code
<StatPill label="Processed" value="12,847" />
<StatPill label="Escalated" value={42} tone="danger" />Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Uppercase micro-label. |
value | ReactNode | — | The value. |
suffix | string | — | Dim unit after the value. |
tone | "neutral" | "accent" | "ok" | "warn" | "danger" | "info" | "neutral" | Keyline colour. |