Meter
A measurement within a known range, wrapping the Base UI Meter: storage used, seats filled, battery left. It reports a level rather than a task, so there's no indeterminate state; tasks underway belong in Progress.
Playground
Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.
Variants
With the label row, or the bare bar. The label is what names the meter for screen readers, so a bare bar needs aria-label instead.
States
Low and high are just values: the indicator animates between them on the base duration, and there's no built-in threshold color, since what counts as nearly full depends on the product.
Styling states
The meter carries no state attributes of its own (a level is a number, not a state), so the hooks are the parts: .ub-meter-track and .ub-meter-indicator. Thresholds are yours to add: set a class on the root when the value crosses one and target it.
.ub-meter-track {
height: 0.5rem;
}
.ub-meter.nearly-full .ub-meter-indicator {
background: var(--ub-danger);
}Props
Everything the Base UI Meter root accepts passes through (min, max, locale, format as Intl.NumberFormat options), plus:
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | – | The current level within min/max. |
label | ReactNode | – | Text above the bar; also names it for screen readers. |
showValue | boolean | false | Renders the formatted value (a percentage by default) beside the label. |
format | Intl.NumberFormatOptions | – | How the value reads, e.g. { style: "unit", unit: "gigabyte" }. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Meter, from @usebones/react.
- One component; track, indicator, and the optional label row render automatically. value + min/max pass through.
- Always pass label (or aria-label); a dev warning fires without one. showValue adds the formatted value, format takes Intl.NumberFormatOptions.
- A meter is a current level, never a loading state; use Progress for tasks underway.
- Restyle in CSS via .ub-meter-track and .ub-meter-indicator (no state attributes); and add your own class for thresholds. Tokens only.