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`	`null \| number`	`null`
`aria-valuetext`	`string`	`undefined`
`getAriaLabel`	`((index: null \| number) => string)`	`undefined`
`getAriaValueText`	`((formattedValue: null \| string, value: null \| number) => string)`	`undefined`
`min`	`number`	`0`
`max`	`number`	`100`
`format`	`NumberFormatOptions`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => 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: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => 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: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => 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
`children`	`\| null \| ((formattedValue: null \| string, value: null \| number) => ReactNode)`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`