Meter.
A labelled usage meter with accessible bounds and semantic tones.
Storage used64 / 100
The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.
Props & API reference
Parameters available in the shared component, including value types, requirements and accepted options.
| Parameter | Type | Required | Default | Possible values | Description |
|---|---|---|---|---|---|
value | number | Yes | — | — | Measured usage or amount. |
max | number | No | 100 | — | Maximum capacity. |
label | string | No | Usage | — | Accessible meter title. |
tone | "accent" | "success" | "warning" | "danger" | No | accent | accent · success · warning · danger | Progress fill color. |
showValue | boolean | No | true | true · false | Show numeric usage beside the label. |
className | string | No | — | — | Additional CSS class on the outer component element. |