Feedback
Progress
A bar that fills, or sweeps when the end is unknown.
Examples
determinate
Notes
A bar that fills, or sweeps when the end is unknown.
Flat: a track in --stone, a fill in --ink. The White Reset has no gradient and no glow, so the only thing carrying the reading is the boundary between the two.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | Names what is progressing. Required: a bare bar announces nothing. | |
| showValue | boolean | false | Prints the percentage above the bar. Only meaningful when `value` is set. |
| value | number | null | null | 0–100. Omit (or pass `null`) when the duration is genuinely unknown — the bar then sweeps instead of filling, and Radix drops `aria-valuenow` so a screen reader is told "indeterminate" rather than a number that is a guess. |
Also accepts everything in Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- Omitting value drops aria-valuenow, so a screen reader hears “indeterminate” rather than a number that is a guess.
- label is required — a bare bar announces nothing.