Search for a command to run...
A determinate progress bar. Use for known-percentage operations (uploads, multi-step flows, usage limits). Track and indicator share the brand tangerine family. For indeterminate spinners, use `Spinner`.
Forwards every Radix Progress.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current percentage 0–100. Pass null for indeterminate (renders an empty track). |
aria-label | string | — | Required when there's no adjacent label. Screen readers announce this with the percentage. |
className | string | — | Override height, width, margin. Use h-1 / h-2 for inline uploads, default h-3 for usage cards. |
Use a determinate Progress only when you actually know the percentage. For unknown durations,
reach for Spinner instead.
Pair the bar with a numeric or textual readout (e.g. Used 8 of 10 seats — 80%). The bar alone
reads as decorative.
Override className for height when needed — h-1 for tight inline uploads, default h-3 for
usage/limit cards. Width fills parent by default.
Use Progress for a single quick action (under 1s). A Spinner or brief disabled state reads as cleaner — a half-second bar fill feels janky.
Animate values that step in giant jumps (0 → 100). Progress is for gradual fill; abrupt jumps don't benefit from the bar.
Hand-roll the bg color with raw bg-orange-9 etc. The track + indicator are tuned to read as
one tangerine family — override only when truly necessary.