UsageList
A list of usage limits, one a row: the limit's name, how much is used of it, a bar, and a short note, like API calls, storage and seats on a plan.
Master
A plan's limits. Bars turn amber at 80% of a limit and red at 100%; Variants show use over a limit and a list with nothing close.
- Storage32 of 50 GB
- API calls8,420 of 10,000, Almost at limit
Resets on Oct 1
- Seats12 of 12, Limit reached
All seats in use
Usage
Use UsageList to show how much of each limit is used, like a plan or account usage panel. It is one component: pass items, each with an id, a label, used and limit, and optionally a unit and a note. Each row writes used of limit, like 8,420 of 10,000 or 32 of 50 GB, over a kit Meter bar. The bar is blue, turns amber at 80% of the limit and red at 100%; at those points a warning or error icon sits before the numbers and screen readers hear Almost at limit or Limit reached. Use over the limit is shown as it is, like 12 of 10, with a full red bar. note adds a quieter line under the bar, like Resets on Oct 1. Put it in a Section or Card, which gives it its title; the list draws no box of its own. label names the list for screen readers, like Plan usage. See contracts/usagelist.json for the full contract.
Do's
- A plan, account or billing page that shows usage against limits, like API calls, storage and seats.
- A usage panel where people need to spot the limits that are nearly or fully used.
Don'ts
- Do not build usage rows from a Table with a Meter column, or from loose bars and text. Use UsageList.
- Do not use it for task progress, like an upload or a setup checklist. Use Meter or Steps.
- Do not use it to compare records across columns. Use Table.
- Do not pass a percent as used. Pass the real used and limit numbers; the list works out the percent.
- Do not put it in a Card and a Section at once, or draw a box round it yourself.
- Do not use raw hex.
<UsageList label="Plan usage" />