Progress

Determinate progress bar in three sizes.

Storage4.2 of 10 GB

Props

Prop	Values	Default	Description
`value`	number	`0`	Current value, clamped to the range.
`max`	number	`100`	Value that counts as full.
`size`	`"sm"`, `"md"`, `"lg"`	`"md"`	Bar thickness.
`label`	string	`"Progress"`	Accessible name for the bar.
`className`	string	`""`	Appended after the component's own classes.

Common patterns

<Progress value={used} max={quota} label="Storage used" />

// With a visible readout
<div className="flex justify-between text-xs text-muted">
  <span>Storage</span>
  <span>4.2 of 10 GB</span>
</div>
<Progress value={42} label="Storage used" />

Notes

Built from two divs rather than the native <progress> element. That element is genuinely better semantically, but its fill colour cannot be themed the same way across browsers — it needs a different vendor pseudo-element per engine, and none of them accept a CSS custom property reliably. The ARIA attributes here give a screen reader the same information.

Always pass a meaningful label. The default exists so the bar is never unnamed, not because "Progress" is useful.

There is no indeterminate state. If you don't know the value, a Skeleton communicates "waiting" more honestly than a bar pretending to measure something.