Component · 17
Progress
A ruled trough filled with colour, for work that has a measurable end. With no known length it shows a block sweeping across instead. Announced as a progress bar. Built on Base UI.
Determinate
<Progress label="Uploading" value={64} showValue />Indeterminate
Pass null when you cannot say how long it will take. With reduced motion it sweeps more slowly instead of stopping.
<Progress label="Preparing" value={null} />Another range and a name only for screen readers
<Progress aria-label="Step 3 of 5" value={3} min={0} max={5} />Complete
<Progress label="Done" value={100} showValue />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | required | The current value. null means working, but the length is unknown. |
| min / max | number | 0 / 100 | The range. The fill is the value's position within it. |
| label | ReactNode | - | Visible name. Without it, pass aria-label. |
| showValue | boolean | false | Show the value (a percentage by default) beside the label. |
| format | Intl.NumberFormatOptions | percent | How the value is written, e.g. a unit instead of a percentage. |
| getAriaValueText | (formatted, value) => string | - | A friendlier spoken value than the bare number. |
Update value from state as the work advances. The bar does not announce every change; for long jobs also give a status message when it finishes.