Meter
Bounded scalar measurement.
Usage
A meter reports where a value sits inside a known range. Bits owns role="meter" and the aria-value* attributes;
the accessible name is yours, so pass aria-label or aria-labelledby.
70 of 100
Custom range
min and max set the bounds. Put the real unit in
the label — "Storage used, in GB" is far more useful than "Storage".
5 GB of 20 GB
Sizes and tones
The tone is yours to choose, and it should follow the reading. Colour alone is not a signal though — a red meter means nothing to someone who cannot see it, so keep the number or a text status nearby.
Meter vs Progress
Use Meter for a measurement that simply is what it is — disk usage,
password strength, a score out of ten. Use Progress for advancement toward completion, where reaching the
end is the point. A meter at 100% is full; a progress bar at 100% is done.
Props
Plus every native <div> attribute via prop spreading. Values outside
the range are clamped rather than overflowing the track.
| Prop | Type | Default |
|---|---|---|
value | number | 0 |
max | number | 100 |
min | number | 0 |
size | 'sm' | 'md' | 'lg' | 'md' |
color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'primary' |
class Extra classes merged onto the track. | string | — |