Progress
Bar progress
Preview
index.tsxPreview
index.tsxCircle progress
Preview
index.tsxPreview
index.tsxHelper text
Color
Preview
index.tsxPreview
index.tsxHelper text
Preview
index.tsxPreview
index.tsxHelper text
State
Preview
index.tsxPreview
index.tsxHelper text
Preview
index.tsxPreview
index.tsxHelper text
Preview
index.tsxPreview
index.tsxHelper text
Numeral
Preview
index.tsxPreview
index.tsxPreview
index.tsxPreview
index.tsxSize
Preview
index.tsxHelper text
Preview
index.tsxHelper text
Demo
Preview
index.tsxPreview
index.tsxUploading...
Preview
index.tsxPreview
index.tsxUploading...
Design Tokens for Progress
| Token | Color for | State/Meaning |
|---|---|---|
| --par-color-progress-track | Progress track background | Default/Enabled |
| --par-color-progress-thumb-active-neutral | Progress bar fill (neutral) | Active |
| --par-color-progress-thumb-active-accent | Progress bar fill (accent) | Active |
| --par-color-progress-thumb-success | Progress bar fill | Success/Complete |
| --par-color-progress-thumb-error | Progress bar fill | Error/Failed |
Progress API Reference
<Progress />
| Prop | Type | Default | Description |
|---|---|---|---|
| kind | 'bar' | 'circle' | 'bar' | Type of progress indicator |
| value | number | 0 | Current progress value |
| title | string | Title displayed above the progress indicator | |
| helperText | string | Helper text displayed below the indicator | |
| color | 'neutral' | 'accent' | 'neutral' | Color theme |
| state | 'active' | 'success' | 'error' | 'active' | Progress state |
| size | 'sm' | 'md' | 'md' | Size (for circle kind) |
| numeral | boolean | false | Show progress value as numeral |
| ...divProps | HTMLDivElement props | All native div props (className, style, ...) |
Note: Progress inherits all native props from HTMLDivElement.