Skip to content

Documentation

Progress

Progress communicates completion of an ongoing task or operation.

Storybook Source Figma

Root Props

Prop	Type	Default
`size`	`ProgressSize`	`'md'`
Visual size of the progress bar.
`variant`	`ProgressVariant`	`'primary'`
Visual style of the progress bar. Typically mapped to theme color variants.
`max`	`number`	`100`
Maximum value of the progress range. Default is 100.
`min`	`number`	`0`
Minimum value of the progress range. Default is 0.
`value`	`number`	—
Current value representing the progress completion.
`valueText`	`string`	—
Visually hidden accessible label for screen readers, describing the current value (e.g., "60% complete").
`indeterminate`	`boolean`	—
—
`fullWidth`	`boolean`	—
Whether the progress bar should stretch to fill the container width.

Also accepts all <div> attributes.

Child Parts

ProgressTrack: visible fill track.

`ProgressTrack`

Also accepts all <div> attributes.

Types

ProgressProps
ProgressTrackProps
ProgressSize
ProgressVariant

State Model

Determinate state uses value, min, and max.
Indeterminate state ignores exact progress geometry and uses animation instead.