Usage Meter
ProA progress bar visualising resource consumption against a plan limit. Displays current usage, maximum allowance, and a percentage fill. Colour shifts from green to amber to red as the user approaches or exceeds the limit.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard usage meter with label, progress bar, and fraction text. | Use in dashboards and settings to show API calls, storage, or seat usage. |
| With Label | ||
| Warning | Amber-toned meter when usage exceeds 80% of the limit. | Applied automatically when the threshold is crossed. |
Usage Guidelines
Do
Show both the numeric fraction (750 / 1,000) and the visual bar.
Don't
Rely on colour alone to communicate usage state — include text labels.
Do
Shift colour progressively as usage approaches the limit.
Don't
Hide the meter behind navigation — keep it visible in context.
Do
Provide an upgrade CTA when usage is in the warning or critical range.
Don't
Animate the bar on every page load — it becomes distracting.
Code
Design Tokens
Accessibility
- Uses role="meter" with aria-valuenow, aria-valuemin, and aria-valuemax.
- aria-label describes the metric — "API calls used".
- Colour changes are supplemented by text labels (e.g., "Warning: 80% used").