The Meter component displays a scalar measurement within a known range, similar to a gauge.
Installation
import {
Meter,
MeterLabel,
MeterTrack,
MeterIndicator,
MeterValue,
} from "@craftdotui/baseui/components/meter";
Usage
<Meter value={75}>
<MeterLabel>Storage Used</MeterLabel>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
<MeterValue />
</Meter>
Components
Meter (Root)
MeterLabel
Label for the meter.
MeterTrack
Background track.
MeterIndicator
Filled portion indicating the value.
MeterValue
Displays the current value as text.
Examples
Storage Meter
<Meter value={67}>
<MeterLabel>Disk Usage</MeterLabel>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
<MeterValue />
</Meter>
Battery Level
<Meter value={battery} min={0} max={100}>
<MeterLabel>Battery</MeterLabel>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
<MeterValue />
</Meter>
With Thresholds
<Meter value={85} min={0} max={100} low={30} high={70} optimum={50}>
<MeterLabel>Performance Score</MeterLabel>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
<MeterValue />
</Meter>
The Meter component differs from Progress - use Meter for measurements (like disk usage), and Progress for task completion.
Accessibility
- Built on @base-ui/react Meter primitive
- Proper role=“meter” attribute
- ARIA attributes for value and range
- Screen reader support for value announcements