Progress

A progress bar that communicates determinate or indeterminate loading state.

Examples

Default

Upload progress

<Progress label="Upload progress" value={60} />

Variants

Info

Success

Warning

Error

Neutral

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <Progress label="Info" value={60} variant="info" />
  <Progress label="Success" value={80} variant="success" />
  <Progress label="Warning" value={45} variant="warning" />
  <Progress label="Error" value={30} variant="error" />
  <Progress label="Neutral" value={50} variant="neutral" />
</div>

With Value Label

Upload progress60%

<Progress label="Upload progress" value={60} hasValueLabel />

Custom Formatter

Upload progress3 GB / 5 GB

<Progress
  label="Upload progress"
  value={3}
  formatValueLabel={(value, max) => `${value} GB / ${max} GB`}
  hasValueLabel
  max={5}
/>

Indeterminate

Upload progress

<Progress label="Upload progress" value={undefined} isIndeterminate />

Disabled

Upload progress

<Progress label="Upload progress" value={60} isDisabled />

Hidden Label

Upload progress

<Progress label="Upload progress" value={60} isLabelHidden />

Custom Max

Upload progress60%

<Progress label="Upload progress" value={3} hasValueLabel max={5} />

Complete

Upload progress100%

<Progress
  label="Upload progress"
  value={100}
  hasValueLabel
  variant="success"
/>

API

Progress

A progress bar that communicates determinate or indeterminate loading state.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
formatValueLabel	(value: number, max: number) => string	—	Custom formatter for the value label and aria-valuetext.
hasValueLabel	boolean	false	Whether to display the formatted value beside the label.
isDisabled	boolean	false	Whether the progress bar is visually disabled.
isIndeterminate	boolean	false	Whether to render an indeterminate loading indicator.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Accessible label for the progress bar.
max	number	100	Maximum progress value.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
role	'meter' | 'progressbar'	'progressbar'	ARIA role for the progress indicator. Use 'progressbar' for task completion and 'meter' for static gauges.
style	CSSProperties	—	Inline styles applied to the root element.
value	number	0	Current progress value.
variant	"error" | "info" | "success" | "warning" | "neutral"	'info'	Semantic color variant.