Progress Indicators
Progress renders a determinate horizontal bar that fills to a percentage you control. Reach for it whenever a task has a knowable completion ratio: an upload, a multi-step wizard, a batch job, or a quota meter. When the duration is unknown and there is nothing to measure, use an indeterminate Spinner instead.
Live demo
The interactive story below runs from the deployed Storybook.
Usage
Source:
progress.tsx
import { Progress } from "@beacon/design-system";
// value is a 0–100 percentage; the bar fills accordingly.<Progress value={60} />
// Drive it from state for live updates.<Progress value={uploadPercent} />Props
Progress forwards all props of the Radix ProgressPrimitive.Root element.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Completion percentage from 0 to 100. The indicator translates to fill this fraction. |
className | string | (none) | Extra classes merged onto the track (for example to change height or width). |
When to use
- Show progress of a task with a measurable completion ratio (uploads, imports, exports).
- Indicate position through a multi-step flow or wizard.
- Visualize a quota or usage meter where the maximum is known.
Do not use Progress when there is no measurable percentage. For indeterminate, open-ended waits use the Spinner instead.