Progress stat
A labelled goal row: primary label with a trailing figure on top, and a filled pill on a quiet dotted track below. The touch idiom for quantified progress toward a limit — documented today, drafts waiting, tickets closed. The required value keeps status text-backed, so colour never carries meaning alone.
Example
Documented today19 / 31
Drafts waiting3
<ProgressStat label="Documented today" value="19 / 31" percent={61} tone="success" /><ProgressStat label="Drafts waiting" value="3" percent={18} tone="warning" />The meter reports role="meter" with aria-valuenow/min/max. When meterLabel is omitted the accessible name joins label and value, so a scan reads "Documented today, 19 / 31".
Tones
On track82%
Watch45%
Overdue12%
Reviewing60%
<ProgressStat label="On track" value="82%" percent={82} tone="success" /><ProgressStat label="Watch" value="45%" percent={45} tone="warning" /><ProgressStat label="Overdue" value="12%" percent={12} tone="danger" /><ProgressStat label="Reviewing" value="60%" percent={60} tone="alt" />Every status badge tone is available. Pair the fill with a label the value already spells out (percent, count, ratio) — never colour alone.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | ReactNode | — | Left-hand label, e.g. "Documented today". |
value | ReactNode | — | Required trailing figure; keeps status text-backed. |
percent | number | — | Filled fraction 0–100; clamped. |
tone | BadgeTone | 'neutral' | Bar colour. success, warning, danger, info, alt, neutral. |
meterLabel | string | — | Explicit meter name. Falls back to label + value. |