Progress

The Progress component displays the status of a task or operation over time.

Uploading files

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

export default function UnstyledProgressIntroduction() {
  return (
    <Progress.Root
      className={classes.progress}
      value={50}
      aria-labelledby="ProgressLabel"
    >
      <span className={classes.label} id="ProgressLabel">
        Uploading files
      </span>
      <Progress.Track className={classes.track}>
        <Progress.Indicator className={classes.indicator} />
      </Progress.Track>
    </Progress.Root>
  );
}

Installation

Base UI components are all available as a single package.

npm install @base-ui-components/react

Once you have the package installed, import the component.

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

Anatomy

Progress

<Progress.Root /> is a top-level component that wraps the other components.
<Progress.Track /> renders the rail that represents the total length or duration of progress.
<Progress.Indicator /> renders the filled portion of the track.

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

The value prop represents the percentage value of the Progress component. The default minimum and maximum values are 0 and 100, and can be changed with the min and max props. When progress is determinate the data-progressing attribute exists, changing to data-complete when value equals max.

function App() {
  const [progressValue] = React.useState(25);
  return (
    <Progress.Root value={progressValue} min={0} max={100}>
      <Progress.Track>
        <Progress.Indicator />
      </Progress.Track>
    </Progress.Root>
  );
}

Indeterminate

Set value to null to configure an indeterminate progress bar. The data-indeterminate attribute will exist.

<Progress.Root value={null}>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Uploading files

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

export default function IndeterminateProgress() {
  return (
    <Progress.Root
      value={null}
      aria-labelledby="ProgressLabel"
      className={classes.progress}
    >
      <span className={classes.label} id="ProgressLabel">
        Uploading files
      </span>
      <Progress.Track className={classes.track}>
        <Progress.Indicator className={classes.indicator} />
      </Progress.Track>
    </Progress.Root>
  );
}

RTL

Place the component inside an HTML element or component with the HTML dir="rtl" attribute to change the direction that the Indicator fills towards for right-to-left languages:

<html dir="rtl">
  <body>
    <Progress.Root>
      <Progress.Track>
        <Progress.Indicator /> {/* fills from right to left */}
      </Progress.Track>
    <Progress.Root/>
  </body>
</html>

تحميل الملفات (RTL)

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

export default function RtlProgress() {
  return (
    <div dir="rtl">
      <Progress.Root
        value={65}
        aria-labelledby="RtlProgressLabel"
        className={classes.progress}
      >
        <span className={classes.label} id="RtlProgressLabel">
          تحميل الملفات (RTL)
        </span>
        <Progress.Track className={classes.track}>
          <Progress.Indicator className={classes.indicator} />
        </Progress.Track>
      </Progress.Root>
    </div>
  );
}

Overriding default components

Use the render prop to override the rendered element for all subcomponents:

<Progress.Indicator render={<MyCustomIndicator />} />
// or
<Progress.Indicator render={(props) => <MyCustomIndicator {...props} />} />

Accessibility

The Progress component implements the ARIA progressbar specification.

When using Progress, ensure that it has a human-readable text label by using either the aria-label, aria-labelledby, or getAriaLabel prop:

<Progress.Root aria-labelledby="MyCustomLabel">
  <MyCustomLabel id="MyCustomLabel">Loading progress<MyCustomLabel/>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

// or

<Progress.Root aria-label="Loading progress">
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

API Reference

ProgressRoot

Prop	Type	Default	Description
`aria-label`	`string`		The label for the Indicator component.
`aria-labelledby`	`string`		An id or space-separated list of ids of elements that label the Indicator component.
`aria-valuetext`	`string`		A string value that provides a human-readable text alternative for the current value of the progress indicator.
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`getAriaLabel`	`func`		Accepts a function which returns a string value that provides an accessible name for the Indicator component
`getAriaValueText`	`func`		Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress indicator.
`max`	`number`	`100`	The maximum value
`min`	`number`	`0`	The minimum value
`render`	`union`		A function to customize rendering of the component.
`value`	`number`	`null`	The current value. The component is indeterminate when value is `null`.

ProgressTrack

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

ProgressIndicator

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

Edit this page on GitHub

Preview Card

Radio Group