Usage Meter
Plan usage as one stacked bar against a limit, with a legend and a total.
import { UsageMeter } from "pleate/usage-meter";Normal, warning and danger
Trip photo storage
- Photos5.1 GB
- Videos1.6 GB
- Documents0.5 GB
Shared albums
- Lisbon 20261.4 GB
- Porto weekend0.3 GB
Offline maps
- Portugal2.9 GB
- Andalusia1 GB
Past 80% the bar turns orange, past 95% red
Changing usage
Figures roll to the new value.
Trip photo storage
- Photos5.1 GB
- Videos1.2 GB
Props
- segments
Parts of the usage. The first carries the accent, the rest use neutral steps.
{ label: string; value: number; tone?: "accent" | "neutral" }[]- max
The plan limit.
number- label
Heading. It also names the meter.
ReactNode- unit
Unit after the figures, e.g. "GB".
string- warnAt
Share of max where the lead segment and the total turn warning.
numberdefault 0.8- dangerAt
Share of max where they turn danger.
numberdefault 0.95- format / locale
Number formatting.
Intl.NumberFormatOptions / stringdefault { maximumFractionDigits: 1 }
Accessibility
- role="meter" with aria-valuenow, min, max and a valuetext like "7.2 of 10 GB used, 72%".
- The legend is a list, and each segment's figure is read as text.
- Reduced motion shows the bar at full size without the grow.