Feedback
Progress Bar
Progress Bar is determinate or indeterminate progress toward a known or unknown completion point.
Style (Default/Success/Warning/Danger) — 4 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.3.0-beta
Known open questions
- Figma has no numeric value property — React exposes value/max for determinate usage.
Live preview
Determinate / Indeterminate
Purpose
Showing determinate progress toward a known completion point (upload percentage, multi-step completion, quota usage).
Anatomy
Progress Bar = label + native progress or indeterminate track + optional value text.
Variants and states
default · success · warning · danger
When to use
Any process where percentage-complete is knowable and meaningful.
When not to use
Indeterminate/unknown-duration processes — use Spinner.
Accessibility
role="progressbar" with aria-valuenow/min/max.
Keyboard behavior
Not focusable unless paired with a control that owns the operation.
Common mistakes
Using a Progress Bar for a process with no real measurable progress.
Properties
Style as variants, shown at a fixed demo fill percentage.
What is the difference between Progress Bar and Spinner?
Use Progress Bar when completion is measurable or indeterminate progress must be communicated semantically. Spinner covers decorative or standalone loading indicators.
Tokens used
semantic/border/defaultsemantic/action/primarysemantic/feedback/success
Known limitation
No numeric "value" property exists — Figma doesn't support a float type.
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current progress value. |
| max | number | 100 | Maximum progress value. |
| label | string | — | Accessible name. |
| indeterminate | boolean | false | Unknown-duration progress. |
| variant | "default" | "success" | "warning" | "danger" | "default" | Semantic style. |
React example
Copy React example
import { ProgressBar } from "@/components/ui/ProgressBar";
export function Example() {
return <ProgressBar label="Uploading files" value={42} max={100} showValue />;
}