Progress

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

useProgressIndicator API

import { useProgressIndicator } from '@base_ui/react/Progress';

Name	Type	Default	Description
value*	number \| null	-	The current value. The component is indeterminate when value is `null`.
direction	ProgressDirection	'ltr'	The direction that progress bars fill in
max	number	100	The maximum value
min	number	0	The minimum value

Name	Type	Description
getRootProps	(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>

import { useProgressRoot } from '@base_ui/react/Progress';

Name	Type	Default	Description
value*	number \| null	null	The current value. The component is indeterminate when value is `null`.
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.
direction	ProgressDirection	'ltr'	The direction that progress bars fill in
getAriaLabel	(index: number \| null) => string	-	Accepts a function which returns a string value that provides an accessible name for the Indicator component
getAriaValueText	(value: number \| null) => string	-	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

Name	Type	Description
direction	ProgressDirection	The direction that progress bars fill in
getRootProps	(externalProps?: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>
max	number	The maximum value
min	number	The minimum value
state	ProgressStatus
value	number \| null	Value of the component