Progress

Displays the status of a task that takes a long time.

View as Markdown
Export data

Anatomy

Import the component and assemble its parts:

Anatomy

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:

)
Name
Description

The current value. The component is indeterminate when value is null.

Type

number | null

Default

aria-valuetext

string

Description

A string value that provides a user-friendly name for aria-valuenow, the current value of the meter.

Type

string

getAriaValueText

function

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

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

)
Name
Description

The minimum value.

Type

number

Default

0

max

number

(default:

100

)
Name
Description

The maximum value.

Type

number

Default

100

format

Intl.NumberFormatOptions

Name
Description

Options to format the value.

Type

Intl.NumberFormatOptions

className

string | function

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

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

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

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

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

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

Type

| ((formattedValue: string | null, value: number | null) => ReactNode)
| null

className

string | function

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

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

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

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.