StatRow
<StatRow> is a compact row of [label · value] pairs separated by vertical dividers. Use at the top of a content section for at-a-glance metrics.
When to use
- Above a table or list — “Total · Active · Failed” summary.
- Inside a card header to surface key metrics.
- Section header where 3–5 numbers tell the user where they are.
Don’t use StatRow for: KPI dashboards (use Card + CardGrid), single metrics (use plain <Text variant="label"> + value), or rows with actions.
Default
Total128
Indexed120
Failed8
<StatRow items={[ { label: 'Total', value: '128' }, { label: 'Indexed', value: '120' }, { label: 'Failed', value: <span className="text-destructive">8</span> },]} />API
| Prop | Type | Default | Description |
|---|---|---|---|
items * | { label: string; value: ReactNode }[] | — | 3–5 stat items. |
className | string | — | Forwarded. |
Design guidelines
✓ Do
- Keep to 3–5 items. More turns into noise; less doesn't need a row.
- Use destructive color on the value (not the label) when a stat carries a problem signal.
- Place above the table or list it summarizes. The relationship should be visually obvious.
✗ Don't
- Stuff long labels. "Items currently waiting for processing" → "Pending".
- Render StatRow inside a Card unless the card is the host for these stats. Stacking borders looks broken.
Accessibility
- Plain semantic
<div>s. The Separators between items aredecorative=true(default) — ignored by screen readers. - Pair with a section heading above so the relationship between heading and stats is clear.