Meter
Uses the native meter element for a scalar value within a known range.@gemologic/sheen · dataPlayground
This example has no scalar controls. Its validated source remains interactive below.
<Meter label="Storage used" value={72} min={0} max={100} low={60} high={85} optimum={20} />Variant matrix
Storage
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Progress.tsx- Tokens
--sheen-color-bg-inset--sheen-color-success--sheen-color-warning--sheen-color-danger
Accessibility
Role: meterKeyboard: No component-owned keysDo
- Use for a measurement with meaningful bounds and thresholds.
Do not
- Do not use Meter for task completion; use Progress.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required accessible measurement label. |
value * | number | — | Finite current value within min and max. |
min | number | 0 | Finite lower bound. |
max | number | 1 | Finite upper bound greater than min. |
low | number | — | Optional lower threshold within the range. |
high | number | — | Optional upper threshold within the range and not below low. |
optimum | number | — | Optional optimal value within the range. |