Progress

Determinate or indeterminate progress bar with label and three sizes.

Example

Props

NameTypeDefaultRequiredDescription
valuenumberNoCurrent progress (omit for indeterminate)
maxnumber100NoMaximum value
size'sm' | 'md' | 'lg''md'NoBar height
labelstringNoAccessible label for the progress bar

Accessibility

  • role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
  • aria-label from label prop
  • Indeterminate when value is undefined

Related Tokens

--progress-surface--progress-on-surface--progress-indicator