Docs Components
ProgressMeterexperimental
A slim bar showing how far along something is, with one rule everywhere: below 70 reads red, 70–84 ochre, 85 and up green. Tagging completeness never renders as a bare percentage — use the segmented meter so people can see which facets are missing.
Variants
tone enumFill coloring.
auto— Threshold-mapped status colors — the completeness meter.neutral— Ink fill for plain, non-evaluative progress.
API
| Prop | Type | Description |
|---|---|---|
value required | number | 0–100, clamped. |
label required | string | Accessible name (aria-label on the meter). |
tone | string | auto = threshold colors. |
dangerBelow | number | Override only with a documented product reason. |
cautionBelow | number | Override only with a documented product reason. |
showValue | boolean | Tabular percentage after the track. |
SegmentedMeter | component | {segments:[{label,fill,weight}], value, label}: completeness with visible anatomy — one segment per facet, width by weight, filled by slot fill; tooltip + aria-label carry the per-facet detail; the value text takes the threshold tone. Use where the number's CAUSE is the actionable fact (tagger work queue). |
Design specifications
- track
color-border-strong - height
space-1 - radius
radius-full - fills
color-status-{success|caution|danger}-text or color-bg-inverse (neutral) - value-font
type-caption tabular
Guidelines
- mustThe percentage text always accompanies the bar — the fill color is never the sole signal.
- must-notDo not invent per-screen thresholds; change the defaults here or nowhere.
- shouldWhere many rows share a value (untagged catalogs), use the SegmentedMeter — an identical-percentage wall is honest but unreadable without its anatomy.
- mustEditorial completeness ALWAYS renders as the SegmentedMeter with segments from completenessSegments() — derived from the same targets/weights as the number (genres 40% of 3, themes 30% of 2, moods 30% of 2), so the anatomy and the formula cannot drift. A bare percentage meter for completeness is forbidden: 40% with no anatomy is unreadable.