Meter
A meter shows a value against a known maximum.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
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 | — | Names what is being measured. It is the accessible name, so say the thing, as in Storage used. |
| value * | number | — | Where the measurement currently sits, in the same unit as max. |
| max * | number | — | The ceiling the value is read against. A meter without a known ceiling has nothing to say. |
| unit | string | — | Appended when the value is read out, as in 40 of 50 gigabytes. |
| appearance | 'default' | 'success' | 'caution' | 'critical' | 'default' | Colours the fill. Use it to say the value has crossed a threshold, not to decorate. |
Accessibility
What the component does for you, and what it needs from you.
- The meter carries its value, its ceiling and its unit, so a screen reader announces the measurement rather than a percentage of a bar.
- 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.