Progress

Displays the status of a task that takes a long time.

import * as React from 'react';
import { Progress } from '@base-ui-components/react/progress';
import styles from './index.module.css';

export default function ExampleProgress() {
  const [value, setValue] = React.useState(20);

  // Simulate changes
  React.useEffect(() => {
    const interval = window.setInterval(() => {
      setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Progress.Root value={value}>
      <Progress.Track className={styles.Track}>
        <Progress.Indicator className={styles.Indicator} />
      </Progress.Track>
    </Progress.Root>
  );
}

API reference

Import the component and assemble its parts:

Anatomy

import { Progress } from '@base-ui-components/react/progress';

<Progress.Root>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
  <Progress.Value />
</Progress.Root>

Root

Groups all parts of the progress bar and provides the task completion status to screen readers. Renders a <div> element.

Prop	Type	Default
`aria-label`	`string`	`undefined`
`aria-labelledby`	`string`	`undefined`
`value`	`number`	`null`
`aria-valuetext`	`string`	`undefined`
`getAriaLabel`	`(value) => string`	`undefined`
`getAriaValueText`	`(value) => string`	`undefined`
`min`	`number`	`0`
`max`	`number`	`100`
`format`	\| { compactDisplay?: 'long' \| 'short', currency?: string, currencyDisplay?: 'code' \| 'name' \| 'narrowSymbol' \| 'symbol', currencySign?: 'accounting' \| 'standard', localeMatcher?: 'best fit' \| 'lookup', maximumFractionDigits?: number, maximumSignificantDigits?: number, minimumFractionDigits?: number, minimumIntegerDigits?: number, minimumSignificantDigits?: number, notation?: 'compact' \| 'engineering' \| 'scientific' \| 'standard', numberingSystem?: string, signDisplay?: 'always' \| 'auto' \| 'exceptZero' \| 'never', style?: 'currency' \| 'decimal' \| 'percent' \| 'unit', unit?: string, unitDisplay?: 'long' \| 'narrow' \| 'short', useGrouping?: bool }	`undefined`
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in interminate state.
`data-progressing`	Present while the progress is progressing.

Track

Contains the progress bar indicator. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in interminate state.
`data-progressing`	Present while the progress is progressing.

Indicator

Visualizes the completion status of the task. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in interminate state.
`data-progressing`	Present while the progress is progressing.

Value

A text label displaying the current value. Renders a <span> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`