Progress

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

ProgressIndicator API

import * as Progress from '@base_ui/react/Progress';
const ProgressIndicator = Progress.Indicator;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use ProgressIndicator to change the default props of this component with the theme.

import * as Progress from '@base_ui/react/Progress';
const ProgressRoot = Progress.Root;

Props of the native component are also available.

Name	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	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
direction	'ltr' \| 'rtl'	'ltr'	The direction that progress bars fill in
getAriaLabel	func	-	Accepts a function which returns a string value that provides an accessible name for the Indicator component Signature:`function(value: number \| null) => string` `value` The component's value
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. Signature:`function(value: number \| null) => string` `value` The component's value to format
max	number	100	The maximum value
min	number	0	The minimum value
render	element \| func	-	A function to customize rendering of the component.
value	number	null	The current value. The component is indeterminate when value is `null`.

The ref is forwarded to the root element.

You can use ProgressRoot to change the default props of this component with the theme.

import * as Progress from '@base_ui/react/Progress';
const ProgressTrack = Progress.Track;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use ProgressTrack to change the default props of this component with the theme.