Progress
React linear progress bar and circular progress ring with determinate and indeterminate states, feedback states, label, helper text, and value display.
Progress is the linear bar and CircularProgress is the ring. Pass a value, or omit it for the indeterminate state; the ring needs an aria-label.
When to use
Use Progress when you can express completion as a number: an upload, a multi-file scan, or a quota. Use the indeterminate state only while the total is unknown. Use CircularProgress in compact spaces such as cards and table cells.
For step-based flows, use ProgressIndicator instead.
Examples
Props
Props declared by Progress. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
variant | "primary" | "neutral" | ||
state | "error" | "success" | "normal" | ||
value | number | Current progress. null/omitted renders the indeterminate slide. Clamp to [0, max] yourself. | |
max | number | Maximum value. Defaults to 100. | |
label | react.ReactNode | ||
required | boolean | ||
helperText | react.ReactNode | ||
showValue | boolean | ||
aria-label | string | ||
aria-labelledby | string | ||
getValueLabel | (value: number, max: number) => string |
Accessibility
Progress renders role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax, and omits the current value while indeterminate. The visible label names the bar; the ring has no visible label, so pass aria-label or aria-labelledby.
Use getValueLabel to announce a friendlier value such as "3 of 5 files".