Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Loading component...

When to use

The Progress component displays completion progress of a task with a visual progress bar. Use this decision tree to determine when it's appropriate:

<Progress value={50} />

Pass value={null} (or omit value) for an indeterminate loading state.

Compose a label and formatted value with the optional sub-components — the track and indicator are rendered automatically:

<Progress value={50}>
  <ProgressLabel>Uploading assets</ProgressLabel>
  <ProgressValue />
</Progress>

Renders as role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow (or marks as indeterminate when value === null).
Provide an accessible label — render a <ProgressLabel> (wired to the root via aria-labelledby automatically), set aria-label on <Progress>, or point aria-labelledby at a visible heading — so assistive tech can describe what is loading.
For long tasks (>5s), complement the bar with a textual status such as "Uploading 12 of 48 files" — a bare percentage number rarely tells the user enough to decide whether to wait.

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133
minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109