CircularProgress
The CircularProgress component displays a circular rating or progress indicator.
Usage
Default
<CircularProgress value={75} label="Progress Score" />Props
| Type | Description | |
|---|---|---|
| announceInnerValue | boolean | 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 | ID reference to one or more elements that describe the progressbar. |
| aria-label | string | Accessible label for the progressbar. Takes priority over `label`. |
| aria-labelledby | string | ID reference to one or more elements that label the progressbar. Takes priority over `aria-label` and `label`. |
| ariaValueText | string | Custom accessible value text for assistive technologies. Example: "75 percent complete" |
| className | string | Optional class name for custom styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| decorative | boolean | Marks the component as decorative. When true, the progressbar will be hidden from assistive technology. |
| label | string | Visible label fallback and default accessible name. Used only when no aria-label or aria-labelledby is provided. |
| max | number | Maximum value for the range (default: 100). |
| min | number | Minimum value for the range (default: 0). |
| shadow | ShadowType | Optional shadow style for the component ('none' | 'light' | 'medium' | 'strong' | 'intense'). |
| showRaw | boolean | Whether to show raw value (e.g., "75/100") instead of percent. |
| size | SizeType | Size of the component ('xs' | 'small' | 'medium' | 'large' | 'xl'). |
| state | StateType | State of progress ('success' | 'error' | 'warning' | 'disabled' | ''). |
| theme | ThemeType | Optional theme for the component ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear'). |
| value | number | Current value to be visualized (e.g., 75). |