docs / core / stat-chip
StatChip
a mini metric in a pill: a label, a figure, an optional unit. tone colors only the value, so a row of them scans as numbers, not a rainbow.
intensity · recedesrsc · server
provenance
shaped from sisu-pluslayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
a wrapping row of metrics in a card header or dashboard rowmixed tones side by side; the neutral chip is the resting statenot a status indicator. a state without a figure is Badgenot clickable. it renders a span; a metric that navigates gets wrapped, not wireda11y
a plainspan: label, value and unit read in order · tone is never the only signal, the label names the metricjest-axedependencies
class-variance-authoritytones
total1,240active86done99%uptime99.9%due4failed2
sizes
credits142crcredits142cr
props
| prop | type | default | notes |
|---|---|---|---|
| value | ReactNode | — | the figure. semibold, tone-colored. |
| label | ReactNode | — | leading muted label, e.g. "credits". |
| unit | ReactNode | — | trailing faint unit, e.g. "cr", "%". |
| tone | "neutral" | "accent" | "accent-alt" | "success" | "warning" | "danger" | "neutral" | tints the border and colors the value. |
| size | "sm" | "md" | "md" | sm drops to a 24px pill for the densest rows. |
get it
bun add @usva-ui/reactusage
import { StatChip } from "@usva-ui/react/primitives/stat-chip";
<StatChip label="credits" value="142" unit="cr" />
<StatChip tone="accent-alt" label="done" value="99" unit="%" />