Progress
A high-quality, unstyled React progress bar component that displays the status of a task that takes a long time.
Displays the status of a task that takes a long time.
Export data
Anatomy
Import the component and assemble its parts:
import { Progress } from '@base-ui/react/progress';
<Progress.Root>
<Progress.Label />
<Progress.Track>
<Progress.Indicator />
</Progress.Track>
<Progress.Value />
</Progress.Root>;API reference
Root
| Name | Type | Default | Description |
|---|---|---|---|
formatOptional | Intl.NumberFormatOptions | undefined | — | Options to format the value. |
getAriaValueTextOptional | ((formattedValue: string | null, value: number | null) => string) | undefined | — | Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. |
localeOptional | Intl.LocalesArgument | undefined | — | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. |
maxOptional | number | undefined | 100 | The maximum value. |
minOptional | number | undefined | 0 | The minimum value. |
valueRequired | number | null | null | The current value. The component is indeterminate when value is `null`. |