Progress and Meter

Show a task that runs, or a fixed amount.

Base UI ProgressBase UI MeterProgress sourceMeter source

Determinate

Use this for a task that runs and has a known end, such as an export. Pass a value from 0 to 100. Progress.Value shows it as a percentage.

Export events
x

Indeterminate

Use this when you cannot know how long the task takes. Pass value={null}. The bar shows a moving shimmer.

Loading insights
x

Colors

Use the default brand color in most places. Colors have no fixed meaning, so pick another one only to match the page. The shimmer uses the same color.

yellow
x
x
blue
x
x
green
x
x
gray
x
x

Meter thresholds

Use Meter for an amount that does not run, such as quota use. This demo changes the color above 80% and above 95%.

Monthly events used
x

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Use Progress for a task that is running. Use Meter for a fixed amount, such as quota use or storage.

API

Props that the library adds. Every part also takes all the Base UI props.

Progress.Root

PropTypeDefaultDescription
color'gray' | 'brand' | 'blue' | 'cobalt' | 'coral' | 'corn-blue' | 'green' | 'lemon' | 'lime' | 'purple' | 'tangerine' | 'teal' | 'violet' | 'yellow''brand'Sets the indicator color.

Meter.Root

PropTypeDefaultDescription
color'gray' | 'brand' | 'blue' | 'cobalt' | 'coral' | 'corn-blue' | 'green' | 'lemon' | 'lime' | 'purple' | 'tangerine' | 'teal' | 'violet' | 'yellow''brand'Sets the indicator color.