Meter
Thin inline bars rendered as plain CSS, not a chart engine — so they cost nothing, stay crisp at any zoom, keep their text selectable, and render on the server. Every bar takes a required textual value; colour never carries the number alone.
Meter
Storage used72%
<Meter label="Storage used" value={72} value_label="72%" tone="warning" />BarRow
North82%
South54%
West31%
<BarRow label="North" value={82} value_label="82%" /><BarRow label="South" value={54} value_label="54%" tone="warning" /><BarRow label="West" value={31} value_label="31%" tone="danger" />BenchmarkBar
68%
<BenchmarkBar value={68} value_label="68%" benchmark={75} />StackedBar
- Resolved48
- In progress22
- Blocked9
<StackedBar segments={[ { label: 'Resolved', value: 48, tone: 'success' }, { label: 'In progress', value: 22, tone: 'info' }, { label: 'Blocked', value: 9, tone: 'danger' }, ]}/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | — | 0–100 for Meter, BarRow, BenchmarkBar. |
value_label | string | — | Required figure shown beside the bar. |
tone | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'alt' | varies | Fill colour. |
benchmark | number | — | BenchmarkBar only: rule position, 0–100. |
segments | StackedBarSegment[] | — | StackedBar only: value/tone/label per slice. |