Progress displays the progress status for a task that takes a long time or consists of several steps.

For displaying indefinite progress status, check Loader component.


Progress is controlled by the value property which will define the width of the bar. By default, it works withing the 0-100 boundaries, which means that passing value={50} will set it to be exactly at the middle.

You can control these min and max boundaries in case your app needs them to be different.


Progress supports primary (default), critical and positive colors to be used in different contexts. These colors depend on your theme token values.


Progress should be labelled either by passing aria-labelledby attribute to it pointing to a text label or with aria-label attribute.

By default, Progress uses a scorebar role. In case you're using Progress with a different context like score bars, you can manually change this role by passing a role attribute with attributes property.


valuenumber0falseCurrent value
minnumber0falseStart boundary
maxnumber100falseEnd boundary
colorprimary, critical, positiveprimaryfalse
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element