Meter
A meter shows a value against a known maximum.
#Default
Use a meter for a value with a ceiling people care about.
Staffed seats7 of 8
import { Meter } from '@wolf-rayet/react';
<Meter label="Staffed seats" value={7} max={8} />#Appearance
Use a colour when the value crosses a threshold.
Load2 of 6
Load5 of 6
Load7 of 6
import { Meter } from '@wolf-rayet/react';
<Meter label="Load" value={2} max={6} appearance="success" />
<Meter label="Load" value={5} max={6} appearance="caution" />
<Meter label="Load" value={7} max={6} appearance="critical" />#Units
Add a unit when the numbers alone are ambiguous.
Retry budget3 of 4 used
Stock held1 of 3 days
import { Meter } from '@wolf-rayet/react';
<Meter label="Retry budget" value={3} max={4} unit="used" appearance="caution" />
<Meter label="Stock held" value={1} max={3} unit="days" />