Progress
A task's completion, wrapping the Base UI Progress. The track, indicator, and optional label row render automatically, and null means indeterminate; a level that isn't a task (storage used) belongs in the Meter.
Playground
Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.
Variants
Determinate fills to the value and animates width changes; indeterminate (value={null}) sweeps a short bar across the track and drops the value, since there's nothing to show.
States
Base UI sets data-progressing between min and max, data-indeterminate for null, and data-complete at max; the bar looks the same at 100% until you style data-complete, so a finished upload usually swaps the label too.
Styling states
The root carries data-indeterminate while the value is null and data-complete at the max; the width transition and sweep animation both run on motion tokens:
.ub-progress[data-complete] .ub-progress-indicator {
background: var(--ub-success);
}Props
Everything the Base UI Progress root accepts passes through (min, max, locale, format as Intl.NumberFormat options), plus:
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | – | Completion within min/max; null means indeterminate. |
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: "decimal" }. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Progress, from @usebones/react.
- One component; track, indicator, and the optional label row render automatically. value + min/max pass through; value={null} is indeterminate.
- Always pass label (or aria-label); a dev warning fires without one. showValue adds the formatted value, format takes Intl.NumberFormatOptions.
- For current levels (storage, quota) use Meter instead; Progress is for tasks underway.
- The indeterminate sweep runs on motion tokens, so reduced motion stills it.
- Restyle in CSS via .ub-progress-track, .ub-progress-indicator, [data-progressing], [data-indeterminate], [data-complete]. Tokens only.