Progress

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

Export data

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 className={styles.Progress} value={value}>
      <Progress.Label className={styles.Label}>Export data</Progress.Label>
      <Progress.Value className={styles.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.Label />
  <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
`value`	`number \| null`	`null`
`getAriaValueText`	`((formattedValue: string \| null, value: number \| null) => string)`	`undefined`
`locale`	`LocalesArgument`	`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`	`\| ((formattedValue: string \| null, value: number \| null) => ReactNode) \| null`	`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.

Label

An accessible label for the progress bar. Renders a <span> 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.