Meter
StableA thin bar that shows how much of something is used, and turns amber past a set point.
Also known as meter bar, progress bar, gauge, capacity bar
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Plain
<Meter label="Space used" value={40} valueText="40% of the space" />A dark fill, as wide as the amount used out of the limit.
When to use it
A thin bar for an amount out of a limit, such as space used in a chat. It stays dark and only turns amber past the point where the person should act.
Made of: Track · Filled part
Use it for
- Space used in a conversation, or credits used in a plan.
- Any amount with a known limit that people may need to act on.
- A building block inside a larger meter that adds words around it.
Not for
- A wait with no known end: use Spinner.
- Progress of a slow AI task: use GenerationProgress.
- How full the chat is, with words and a Summarize button: use ContextMeter.
Do and avoid
Almost full: 92 of 100 GB used
Do
- Add words for the amount, so it makes sense when read aloud.
- Set a warning point only when the person can do something about it.
- Put words beside the bar that explain the warning.
- Set a limit for amounts that are not percents.
Avoid
- Do not use it for a task with no known total. Use a moving indicator.
- Do not rely on amber alone for the warning.
- Do not use it for something with no limit.
- Do not announce every small change to screen readers.
On a phone
- The bar fills the width of its container and is 6px tall, which is a display, not a tap target.
- Show the value as text beside it, since a thumb covers a bar this thin.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | number | none | Current amount. The fill width is clamped between 0 and 100 percent of max. |
| max | number | 100 | Amount that fills the bar. |
| labelrequired | string | none | Accessible name, such as Context used. |
| warnAt | number | none | Fraction of max, 0 to 1. At or above it the fill uses the attention color. |
| valueText | string | none | Text read out with the value, such as 68% of context. |
| className | string | none | Extra classes for the track. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- warning
- When warnAt is set and value divided by max reaches it, the fill changes to the attention colour.
Tokens
Change one of these and every part that uses it follows.
--border--fg--attention--dur-base
Built in
- Screen readers hear it as a meter with a name, a range and the current amount.
- When valueText is set, screen readers read it in place of the bare number.
- The grow-in motion stops when people turn off motion in their system settings.
What you need to do
- Give it a label that says what is measured.
- Pass valueText with words for the amount, such as "68% of context".
- Put words beside the bar that say why it turned amber. The color change is not announced.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide