ComponentsFeedbackProgress

Progress

Linear · circular · segmented · multi · battery · glow · bubble

SizesColorsVariantsWith labelSegmentedCircularMulti-colorFile uploadSkill bars

Sizes

Live preview

Five track heights: xs, sm, md (default), lg, xl

App.tsx

tsx

1<Progress value={65} size="xs" />
2<Progress value={65} size="sm" />
3<Progress value={65} size="md" />
4<Progress value={65} size="lg" />
5<Progress value={65} size="xl" />

Colors

Live preview

Six color variants — default, secondary, success, warning, error, and gradient

App.tsx

tsx

1<Progress value={70} color="default"   />
2<Progress value={55} color="secondary" />
3<Progress value={85} color="success"   />
4<Progress value={45} color="warning"   />
5<Progress value={30} color="error"     />
6<Progress value={75} variant="gradient" />

Variants

Live preview

default · gradient · glow · striped · indeterminate · bubble · thin

Default65%

Gradient75%

Glow80%

Striped60%

Indeterminate

Bubble tooltip

65%

Ultra thin

App.tsx

tsx

1<Progress value={65} label="Default"       showValue="percent" size="md" />
2<Progress value={75} variant="gradient"    label="Gradient"    showValue="percent" size="md" />
3<Progress value={80} variant="glow"        label="Glow"        showValue="percent" size="md" color="success" />
4<Progress value={60} variant="striped"     label="Striped"     showValue="percent" size="md" />
5<Progress              variant="indeterminate" label="Indeterminate" size="md" />
6 
7{/* Bubble needs an overflow-visible wrapper for the floating tooltip */}
8<div style={{ paddingTop: 32, overflow: 'visible' }}>
9  <Progress value={65} variant="bubble"   label="Bubble tooltip" size="md" />
10</div>
11 
12<Progress value={65} variant="thin"       label="Ultra thin"  size="xs" />

With label + helper text

Live preview

label and helperText add context; valueLabel overrides the auto percentage

Storage used65%

6.5 GB of 10 GB used

Profile completion8/10 tasks

Add your bio and profile photo to complete

CPU Usage0%

High usage detected

App.tsx

tsx

1<Progress
2  value={65}
3  variant="glow"
4  label="Storage used"
5  showValue="percent"
6  helperText="6.5 GB of 10 GB used"
7  size="md"
8/>
9 
10{/* valueLabel overrides the auto percentage with custom text */}
11<Progress
12  value={80}
13  variant="gradient"
14  label="Profile completion"
15  valueLabel="8/10 tasks"
16  showValue="percent"
17  helperText="Add your bio and profile photo to complete"
18  size="md"
19  color="success"
20/>
21 
22{/* Animated entry — value starts at 0, animates to 75 */}
23<Progress
24  value={animated}
25  variant="glow"
26  color="error"
27  label="CPU Usage"
28  showValue="percent"
29  helperText="High usage detected"
30  size="lg"
31/>

Segmented

Live preview

SegmentedProgress divides the bar into discrete blocks — supports per-segment colors

Step 3 of 53 / 5

Weekly goal5 / 7

Multi-color segments3 / 4

App.tsx

tsx

1{/* Step indicator */}
2<SegmentedProgress total={5} value={3} label="Step 3 of 5" />
3 
4{/* Weekly goal — success color, larger size */}
5<SegmentedProgress total={7} value={5} color="success" label="Weekly goal" size="lg" />
6 
7{/* Per-segment colors */}
8<SegmentedProgress
9  total={4}
10  value={3}
11  segmentColors={{ 0: 'success', 1: 'success', 2: 'warning', 3: 'error' }}
12  label="Multi-color segments"
13/>

Circular

Live preview

CircularProgress renders an SVG arc — showValue is true by default

65%

85%

30%

75%

50%

100%

App.tsx

tsx

1{/* Default */}
2<CircularProgress value={65} size={80} />
3 
4{/* Colors */}
5<CircularProgress value={85} size={80} color="success" />
6<CircularProgress value={30} size={80} color="error"   />
7 
8{/* Gradient — larger */}
9<CircularProgress value={75} size={100} gradient showValue />
10 
11{/* Warning */}
12<CircularProgress value={50} size={70}  color="warning" />
13 
14{/* Complete */}
15<CircularProgress value={100} size={80} color="success" />

Multi-color stacked

Live preview

MultiProgress stacks segments end-to-end — showLegend adds a color key

Project allocation

Design 45%

Dev 30%

QA 15%

Budget breakdown

Salaries 40%

Marketing 25%

Infrastructure 20%

Other 10%

App.tsx

tsx

1{/* Project allocation */}
2<MultiProgress
label="Project allocation"
segments={[
  { value: 45, color: 'default',   label: 'Design' },
  { value: 30, color: 'secondary', label: 'Dev' },
  { value: 15, color: 'success',   label: 'QA' },
]}
showLegend
size="lg"
11/>
12 
13{/* Budget breakdown */}
14<MultiProgress
label="Budget breakdown"
segments={[
  { value: 40, color: 'default', label: 'Salaries' },
  { value: 25, color: 'warning', label: 'Marketing' },
  { value: 20, color: 'success', label: 'Infrastructure' },
  { value: 10, color: 'error',   label: 'Other' },
]}
showLegend
size="md"
24/>

File upload simulation

Live preview

Progress variant switches from default → striped (uploading) → glow (complete)

design-system-v2.zip

48 MB

App.tsx

tsx

1const [uploading, setUploading] = useState(false)
2const [uploadPct, setUploadPct] = useState(0)
3 
4function simulateUpload() {
setUploading(true)
setUploadPct(0)
const interval = setInterval(() => {
  setUploadPct(p => {
    if (p >= 100) { clearInterval(interval); setUploading(false); return 100 }
    return p + Math.random() * 12
  })
}, 300)
13}
14 
15<div style={{ border: '1px solid var(--color-border)', borderRadius: 12, padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
  <div>
    <p style={{ fontSize: 14, fontWeight: 600 }}>design-system-v2.zip</p>
    <p style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>48 MB</p>
  </div>
  <span style={{
    fontSize: 14, fontWeight: 700,
    color: uploadPct >= 100 ? 'var(--color-success)' : 'var(--color-primary)',
  }}>
    {uploadPct >= 100 ? '✓ Done' : `${Math.round(uploadPct)}%`}
  </span>
</div>
<Progress
  value={Math.min(uploadPct, 100)}
  variant={uploading ? 'striped' : uploadPct >= 100 ? 'glow' : 'default'}
  color={uploadPct >= 100 ? 'success' : 'default'}
  size="md"
/>
<button
  onClick={simulateUpload}
  disabled={uploading}
  style={{ marginTop: 16, padding: '8px 16px', borderRadius: 8 }}
>
  {uploading ? 'Uploading...' : uploadPct >= 100 ? 'Upload again' : 'Simulate upload'}
</button>
41</div>

Skill bars

Live preview

Combine color and label for a skills or proficiency breakdown

React

95%

TypeScript

88%

Design

72%

Node.js

65%

DevOps

48%

App.tsx

tsx

1const skills = [
{ skill: 'React',      value: 95, color: 'default'   },
{ skill: 'TypeScript', value: 88, color: 'secondary' },
{ skill: 'Design',     value: 72, color: 'success'   },
{ skill: 'Node.js',    value: 65, color: 'warning'   },
{ skill: 'DevOps',     value: 48, color: 'error'     },
7]
8 
9{skills.map(({ skill, value, color }) => (
<div key={skill} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
  <span style={{ width: 88, flexShrink: 0, fontSize: 13, color: 'var(--color-text-secondary)' }}>
    {skill}
  </span>
  <Progress value={value} color={color} size="md" style={{ flex: 1 }} />
  <span style={{ width: 32, textAlign: 'right', fontSize: 12, color: 'var(--color-text-secondary)' }}>
    {value}%
  </span>
</div>
19))}

Progress props

Props

PropTypeDefaultDescription

valuenumber—Progress value 0–max

maxnumber100Maximum value

size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Track height

labelstring—Label shown above the bar

helperTextstring—Helper text shown below the bar

showValue'percent' | 'fraction' | 'none''none'Format for the value shown above the bar

valueLabelstring—Custom value label — overrides the auto-generated value text

formatValue(value: number) => string—Custom value formatter function

SegmentedProgress props

Props

PropTypeDefaultDescription

valuenumber—Number of filled segments

totalnumber10Total number of segments

segmentColorsPartial<Record<number, ProgressColor>>—Per-segment color by index

size'sm' | 'md' | 'lg''md'Segment height

labelstring—Label shown above with count

CircularProgress props

Props

PropTypeDefaultDescription

valuenumber0Progress value 0–100

sizenumber80Diameter in px

strokeWidthnumber8Width of the arc stroke

gradientbooleanfalseApplies a primary→secondary gradient to the arc

showValuebooleantrueShows the percentage in the center

centerLabelstring—Custom text label in the center (replaces percentage)

MultiProgress props

Props

PropTypeDefaultDescription

segments{ value: number; color: ProgressColor; label?: string }[]—Array of stacked segments

maxnumber100Maximum total value

size'sm' | 'md' | 'lg''md'Track height

labelstring—Label shown above the bar

showLegendbooleanfalseShows a color-coded legend below the bar