RadialProgress
Circular progress indicator using conic-gradient, with percentage label and variant colors
Category: feedback · WCAG 2.2-AA · progress, circular, gauge, meter, kpi, dashboard
Variants
- primary
- info
- success
- warning
- error
Sizes
- sm
- md
- lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | The controlled value. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
variant | 'primary' | 'info' | 'success' | 'warning' | 'error' | primary | Selects the visual style variant. |
children | React.ReactNode | — | Content rendered inside the component. |
aria-label | string | — | Accessible label used when no visible label is present. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-primary--cascivo-color-info--cascivo-color-success--cascivo-color-warning--cascivo-color-error--cascivo-color-surface--cascivo-color-surface-2--cascivo-color-text--cascivo-radius-full
When to use
- Dashboard KPI metrics showing completion percentage
- Skill or profile completion meters
- Storage or quota usage displays
When not to use
- Unknown-length operations where completion is not measurable — use Spinner
- Linear progress where a bar is more readable — use Progress or ProgressBar
- Comparing multiple values against each other — use a chart component
How to build an accessible RadialProgress in React →
Examples
Default
Primary color, md size, auto percentage label
<RadialProgress value={72} />Success large
Completed state with success color at large size
<RadialProgress value={100} size="lg" variant="success" />Custom label
Override the default percentage label with custom content
<RadialProgress value={45} variant="warning">45 GB</RadialProgress>Related components
- Spinner — Use for indeterminate loading where total duration is unknown
- Progress — Use when a horizontal bar is more appropriate for the layout
- ProgressCircle — Similar shape but ProgressCircle uses SVG stroke; RadialProgress uses CSS conic-gradient