Default
default.tsx
<CircularProgress value={75} label="Progress Score" />CircularProgress
The CircularProgress component displays a circular rating or progress indicator.
Usage & Examples
Props API
20 props
Columns
Default | Description | ||||
|---|---|---|---|---|---|
announceInnerValue | boolean | No | props | false | Whether the visible value text inside the circle should be announced by assistive technologies. Default: false, because the progressbar itself already exposes value via ARIA. |
aria-describedby | string | No | aria | — | ID reference to one or more elements that describe the progressbar. |
aria-label | string | No | aria | — | Accessible label for the progressbar. Takes priority over `label`. |
aria-labelledby | string | No | aria | — | ID reference to one or more elements that label the progressbar. Takes priority over `aria-label` and `label`. |
ariaValueText | string | No | aria | — | Custom accessible value text for assistive technologies. Example: "75 percent complete" |
className | string | No | styling | — | Optional class name for custom styling. |
data-testid | string | No | testing | — | Backward-compatible alias for test ID attributes. |
decorative | boolean | No | props | false | Marks the component as decorative. When true, the progressbar will be hidden from assistive technology. |
label | string | No | props | "Progress" | Visible label fallback and default accessible name. Used only when no aria-label or aria-labelledby is provided. |
max | number | No | props | 100 | Maximum value for the range (default: 100). |
min | number | No | props | 0 | Minimum value for the range (default: 0). |
shadow | ShadowType | No | styling | — | Optional shadow style for the component ('none' | 'light' | 'medium' | 'strong' | 'intense'). |