ProgressBar
Shows determinate or indeterminate progress of a task
Category: feedback · WCAG 2.2-AA · progress, loading, status, feedback
Variants
- active
- success
- error
Sizes
- sm
- md
States
- determinate
- indeterminate
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value from 0 to max; omit for an indeterminate bar |
max | number | 100 | Maximum allowed value. |
label | string | — | Visible label above the track, wired via aria-labelledby |
helperText | string | — | Supplementary text shown with the progress bar. |
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
status | 'active' | 'success' | 'error' | active | success/error tint the fill and show a glyph next to the label |
Design tokens
--cascivo-color-accent--cascivo-color-success--cascivo-color-destructive--cascivo-color-border--cascivo-color-text--cascivo-color-text-subtle--cascivo-radius-full--cascivo-motion-enter
When to use
- Showing linear determinate progress of a task with a known percentage (value)
- Indicating ongoing work of unknown duration (omit value for indeterminate)
- Reflecting success/error outcome of a tracked operation (status)
When not to use
- A compact circular indicator is preferred — use ProgressCircle
- Pure indeterminate spinning with no track — use Spinner
- Stepping through a multi-step flow — use ProgressIndicator
How to build an accessible ProgressBar in React →
Examples
Determinate
<ProgressBar value={60} label="Uploading" />Indeterminate
<ProgressBar label="Processing" />Success
<ProgressBar value={100} status="success" label="Upload complete" />Related components
- ProgressCircle — Circular form for compact determinate progress
- Spinner — Spinner for indeterminate work with no track