Visual indicator of task completion.
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Progress value (0-100) |
| max | number | 100 | Maximum value |
| showValue | boolean | — | Show percentage text |
| label | string | Progress | Label describing the action (e.g., "Uploading", "Downloading") |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Track | color.secondary | var(--secondary) | Track background | |
| Indicator | color.primary | var(--primary) | Progress indicator |
Basic progress bar showing completion percentage.
<Progress value={50} />Shows the numeric percentage alongside the progress bar.
<Progress value={65} showValue />Progress bar that updates dynamically.
const [value, setValue] = useState(0);
<Progress value={value} showValue label="Uploading" />