Meter
A meter shows a value against a known maximum.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Meter } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| label * | string | None | Names what is being measured, such as Storage used. It is also the accessible name. |
| value * | number | None | The current value, in the same unit as max. |
| max * | number | None | The highest possible value. A meter needs a known maximum to make sense. |
| unit | string | None | Added when the value is read out, as in 40 of 50 gigabytes. |
| appearance | 'default' | 'success' | 'caution' | 'critical' | 'default' | Colours the fill. Use it to show that the value has crossed a threshold, not for decoration. |
Accessibility
What the component does for you, and what it needs from you.
- The meter includes its value, maximum and unit, so screen readers announce the real measurement instead of a percentage.
- The appearance is colour only. If crossing a threshold matters, say so in the label or beside it.
- A meter is not interactive and takes no focus.