Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Default

<Progress value={60} />

Sizes

<Progress size="xs" value={60} />
<Progress size="sm" value={60} />
<Progress size="md" value={60} />
<Progress size="lg" value={60} />

Varying values

<Progress value={25} />
<Progress value={50} />
<Progress value={100} />

Props

PropType / note
size"xs" | "sm" | "md" | "lg" — default "md" (12px)
valuenumber | null — 0..max (default max is 100). null = indeterminate
maxnumber (default 100)
getValueLabel(value, max) => string — accessible label override

Source

packages/react/src/components/progress.tsx