Components / furniture
Meter
Instrument Readout Bar with Tick Overlay
01 Preview
02 Usage
Gauge/readout bar with a segmented tick overlay - reads as an instrument, not a web progress bar.
<Meter label="Coverage" value={82} unit="%" tone="ok" />
<Meter label="Disk" value={214} max={256} unit="GB" tone="warn" />Tones: accent | ok | warn | err. Use for stats/status; not a loading spinner.
showValue={false} hides the numeric readout, leaving label and bar. Give the meter a name
either via label or aria-label — the bar is the widget, and unnamed it announces a bare
number.
03 Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| label | React.ReactNode |
— | — |
| value | number |
0 |
Current value. |
| max | number |
100 |
Full-scale value. |
| unit | string |
— | Unit suffix appended to the readout (e.g. "%", "MB"). |
| tone | 'accent' | 'ok' | 'warn' | 'err' |
accent |
Fill/readout color. |
| showValue | boolean |
true |
Show the numeric value/max readout. |
Also accepts every attribute of React.HTMLAttributes<HTMLDivElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.
04 Import
import { Meter } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';