Meter
Meter shows a value within a known range, such as storage usage or quota consumption.
Storage used
72%
API quota
43%
Errors
88%
Options
| Property | Values | Default |
|---|---|---|
| label | text | Storage used |
| value | number | 72 |
| min | number | 0 |
| max | number | 100 |
| variant | default / positive / notice / negative | default |
| size | md / sm | md |
| valueText | text / none | none (auto percent) |
Accessibility
- Meter uses
role="meter"witharia-valuemin,aria-valuemax, andaria-valuenow. - Use a descriptive label so the current value is understandable out of context.
- Do not rely on color alone; keep label/value text visible.