Progress
A horizontal bar that visualises task completion or loading state. Supports four variants to convey status at a glance.
Examples
With label and value
Storage used45%
Sizes
Small
Medium
Large
Variants
Uploading…70%
Complete100%
Storage nearly full85%
Failed — 3 errors20%
Props
value= 0
number
Current progress value.
max= 100
number
Maximum value.
size= 'md'
'sm' | 'md' | 'lg'
Track height.
variant= 'default'
'default' | 'success' | 'warning' | 'error'
Indicator colour.
label
string
Text label displayed above the track.
showValue
boolean
Show the percentage value above the track.
className
string
Additional classes on the wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current progress value. |
| max | number | 100 | Maximum value. |
| size | 'sm' | 'md' | 'lg' | 'md' | Track height. |
| variant | 'default' | 'success' | 'warning' | 'error' | 'default' | Indicator colour. |
| label | string | — | Text label displayed above the track. |
| showValue | boolean | — | Show the percentage value above the track. |
| className | string | — | Additional classes on the wrapper. |