ProgressBar
ProgressBar Component
Playground
Getting started0%
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| value | number | — | |
| variant | selectdefault | success | warning | danger | — | |
| size | selectxs | sm | md | — | |
| showLabel | boolean | — |
Empty
Getting started0%
Quarter
Loading...25%
Half
Halfway there50%
ThreeQuarters
Almost done75%
Complete
Completed!100%
WithLabel
Uploading file...45%
DangerVariant
Disk usage critical92%
AllVariants
Default60%
Success80%
Warning65%
Danger90%
Sizes
Extra small60%
Small60%
Medium (default)60%
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
showLabel | boolean | — | Show percentage label |
size | select | — | Bar height |
value | number | — | Progress value (0-100) |
variant | select | — | Color variant |
Using ProgressBartsx
import { ProgressBar } from '@/components/ProgressBar'
<ProgressBar
value="..."
variant="..."
size="..."
showLabel="..."
/>Tokens Used
No design tokens detected