Progress
Displays the status of a task that takes a long time.
View as MarkdownAnatomy
Import the component and assemble its parts:
import { Progress } from '@base-ui-components/react/progress';
<Progress.Root>
<Progress.Label />
<Progress.Track>
<Progress.Indicator />
</Progress.Track>
<Progress.Value />
</Progress.Root>
API reference
Root
Groups all parts of the progress bar and provides the task completion status to screen readers.
Renders a <div>
element.
value*
number | null
(default: —
)
number | null
—
- Name
- Description
The current value. The component is indeterminate when value is
null
.- Type
number | null
- Default
—
aria-valuetext
string
string
- Name
- Description
A string value that provides a user-friendly name for
aria-valuenow
, the current value of the meter.- Type
string
getAriaValueText
function
function
- Name
- Description
Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
- Type
((formattedValue: string | null, value: number | null) => string)
locale
Intl.LocalesArgument
Intl.LocalesArgument
- Name
- Description
The locale used by
Intl.NumberFormat
when formatting the value. Defaults to the user's runtime locale.- Type
Intl.LocalesArgument
min
number
(default: 0
)
number
0
- Name
- Description
The minimum value.
- Type
number
- Default
0
max
number
(default: 100
)
number
100
- Name
- Description
The maximum value.
- Type
number
- Default
100
format
Intl.NumberFormatOptions
Intl.NumberFormatOptions
- Name
- Description
Options to format the value.
- Type
Intl.NumberFormatOptions
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Progress.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Progress.Root.State) => ReactElement)
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.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Progress.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Progress.Root.State) => ReactElement)
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.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Progress.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Progress.Root.State) => ReactElement)
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.
children
| ((formattedValue: string | null, value: number | null) => ReactNode)
| null
| ((formattedValue: string | null, value: number | null) => ReactNode)
| null
- Name
- Type
| ((formattedValue: string | null, value: number | null) => ReactNode)
| null
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Progress.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Progress.Root.State) => ReactElement)
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.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Progress.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Progress.Root.State) => ReactElement)
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.