Progress
A horizontal bar showing how far a determinate task has advanced. Reach for it when you can report a real fraction (upload at 60%, 3 of 5 steps, a quota) — pass that fraction as value. When you can't (loading content whose shape you know), use a Skeleton instead; for a busy state with no measurable progress, set value={null} for the indeterminate track. The bar is monotone (one flat bg-foreground fill, no tones) — convey state with adjacent text, not color. Size by context: xs (4px) for inline/table rows, sm (8px) and the default md (12px) for form rows and standalone use, lg (16px) for a hero/featured indicator.
Default
<Progress value={60} />Sizes
<Progress size="xs" value={60} />
<Progress size="sm" value={60} />
<Progress size="md" value={60} />
<Progress size="lg" value={60} />Varying values
<Progress value={25} />
<Progress value={50} />
<Progress value={100} />Props
| Prop | Type / note |
|---|---|
| size | "xs" | "sm" | "md" | "lg" — default "md" (12px) |
| value | number | null — 0..max (default max is 100). null = indeterminate |
| max | number (default 100) |
| getValueLabel | (value, max) => string — accessible label override |
Source
packages/react/src/components/progress.tsx