Progress
A determinate bar, 0–100 — a withdrawal threshold, an onboarding step count.
import Progress from '@/components/ui/Progress';Source: src/components/ui/Progress.tsx
Examples
Values and sizes
Props
<Progress> props
| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | number | — | 0–100. |
size | 'md' | 'lg' | 'md' | md = 12px tall (default), lg = 24px — the style guide's `.progress` / `.progress--lg`. |
className | string | '' | — |
Accessibility
- Renders a native <progress>, so the value is announced without extra aria.
Usage
Don’t
- Don’t use it for an unknown duration — that is Spinner.
- Don’t rely on the bar alone; put the number in text beside it.