How to build an accessible ProgressCircle in React
role="progressbar" with value/max conveys completion to assistive tech; the label prop supplies an accessible name since the SVG arc alone carries no text
When to use a ProgressCircle
- Showing determinate progress compactly as a circular arc
- Displaying a percentage in a small footprint (showValue)
- Tracking completion against a custom maximum (max)
When not to use it
- Indeterminate work with no known value — use Spinner
- Full-width linear progress with a label and helper text — use ProgressBar
- Multi-step flows — use ProgressIndicator
Accessibility
Role progressbar, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Using ProgressCircle for indeterminate loading
Prefer: <Spinner> for indeterminate states
ProgressCircle requires a determinate value; it cannot express unknown progress
Example
<ProgressCircle value={40} label="Loading" />