Progress
Horizontal bar showing the completion progress of a tracked operation
Category: feedback · WCAG 2.2-AA · progress, loading, upload, bar
Variants
- primary
- info
- success
- warning
- error
Sizes
- sm
- md
- lg
States
- determinate
- indeterminate
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | — | Invisible accessible name. The catalog convention; the DOM spelling `aria-label` is accepted as an alias so either guess compiles. |
aria-label | string | — | Accessible label when no visible label is present. |
aria-describedby | string | — | Id of an element describing the progress bar. |
value | number | — | 0–100. Omit for indeterminate state. |
variant | 'primary' | 'info' | 'success' | 'warning' | 'error' | primary | Selects the visual style variant. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-color-surface-2--cascivo-color-primary--cascivo-color-info--cascivo-color-success--cascivo-color-warning--cascivo-color-error--cascivo-color-accent--cascivo-radius-full--cascivo-ease-out
When to use
- Tracked operations with a known total (file uploads, multi-step imports)
- Showing completion percentage of a long-running task
When not to use
- Unbounded waits of unknown duration — use Spinner
- Single-action button loading state — use the button's own loading prop
How to build an accessible Progress in React →
Examples
Determinate
<Progress value={65} />Indeterminate
<Progress aria-label="Loading…" />Success variant
<Progress value={100} variant="success" />Small
<Progress value={40} size="sm" />Related components
- Spinner — Spinner is for unbounded waits; Progress is for operations with a known end point
- ProgressBar — ProgressBar is the richer compound variant with label and percentage display