Bar variant — interactive
Drag slider to change value
Value: 65%
Uploads65%
Storage65%
Processing65%
Loading
Bar sizes
size: sm (8px) · md (14px, default) · lg (20px)
sm — 8px
md — 14px
lg — 20px
Steps variant
variant="steps" · click to advance
3
4
AccountDetailsPaymentDone
Tones
6 fill colors
lime
violet
coral
teal
pink
neon
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "bar"|"steps" | "bar" | Selects between linear bar or numbered step track. |
| value | number | 0 | Current value. For bar: 0–max. For steps: current step (1-based). |
| max | number | 100 | Bar variant only: maximum value. |
| steps | number | 4 | Steps variant only: total step count. |
| tone | "lime"|"violet"|"coral"|"pink"|"teal"|"neon"|"yellow" | "lime" | Fill color. |
| size | "sm"|"md"|"lg" | "md" | Bar height: sm=8px, md=14px, lg=20px. |
| label | string | null | Mono label shown above the bar. |
| showValue | boolean | false | Show percentage beside the label. |
| indeterminate | boolean | false | Shimmer animation instead of fill width. |
| labels | string[] | [] | Steps variant: labels below each step node. |
Usage
import { Progress } from "components/feedback/Progress";
// Bar
<Progress value={65} label="Uploads" showValue tone="lime" />
// Indeterminate
<Progress indeterminate tone="violet" />
// Steps with labels
<Progress
variant="steps"
steps={4}
value={2}
labels={["Account", "Details", "Payment", "Done"]}
/>