Progress
<Progress> is a 8px-tall horizontal bar tinted in the primary token. Use only when you genuinely know the percentage — file uploads, bulk operations, multi-step wizards.
When to use
- File uploads with a known size.
- Bulk row processing where you can count completed / total.
- Wizard / Stepper progress indicator (% of steps).
Don’t use Progress for: indeterminate operations (use Loader), per-button state (use ActionButton), or fake “smooth fill” timers — users see through them.
Default
<Progress value={0} /><Progress value={33} /><Progress value={66} /><Progress value={100} />With label
Pair Progress with Text variant="caption" for the numeric label. The visual + the number together pass even in low-vision contexts.
Uploading42%
<div> <div className="mb-1 flex justify-between text-xs"> <span>Uploading</span> <span className="text-muted-foreground tabular-nums">42%</span> </div> <Progress value={42} /></div>API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | null | Percent complete (0–100). Pass null for indeterminate but prefer Loader. |
max | number | 100 | Maximum value — change only if you have a non-percentage scale. |
className | string | — | Forwarded. |
Design guidelines
✓ Do
- Always pair with a numeric label or a contextual count ("3 of 12 files").
- Animate value changes smoothly; the underlying CSS already handles transitions.
✗ Don't
- Show 1% just to "show progress". Wait until you have real data, then jump to it.
- Use multi-segment progress bars to show different operation phases. Two bars stacked, or a Stepper, are clearer.
Accessibility
- Built on Radix Progress — sets
role="progressbar",aria-valuenow,aria-valuemin,aria-valuemaxautomatically. - For indeterminate state, leave
valuenull; Radix setsdata-state="indeterminate"and announcements behave correctly.