Progress Bar
ProgressBar shows measurable progress toward a known total — uploads, imports, or wizard steps.
Bind value and optional max (default 1) and pick a semantic color when status matters. value is on a 0–max scale — unlike ProgressCircle, which uses 0–100 percent. Indeterminate mode is not supported; for unknown duration use Spinner or LoadingBar. Pair with visible status text when the percentage is critical for accessibility.
- File uploads, imports, or multi-step flows with known totals
- Inline progress beside labels in lists or cards
- Non-zero-based scales via custom
max(e.g. step 3 of 5)
Prefer ProgressCircle for compact circular metrics. Prefer Spinner when duration is unknown.
A brand-colored bar at 50% shows halfway completion for uploads, imports, or stepped flows.
Color presets communicate success, warning, or error without relying on color alone — pair with text for critical states.
Set max when the scale is not 0–1 (e.g. steps in a wizard).
Values clamp to the track ends — useful for near-complete or just-started states.
Circular indicator for compact layouts or dashboard tiles. value is a percentage 0–100.
Semantic color presets for dashboard KPI tiles.
Adjust diameter with the size prop (CSS length).