Progress
A progress bar for displaying task completion or upload status.
Installation
Composition
Use the following composition to build a Progress:
Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
└── ProgressIndicatorProgressTrack and ProgressIndicator are rendered automatically by Progress. ProgressLabel and ProgressValue are optional.
Examples
With Label and Value
Use ProgressLabel and ProgressValue as children of Progress to display a description and a numeric percentage.
API Reference
Built on Base UI's Progress primitive — see the full API reference there.
Progress
Built on Base UI's Progress.Root. Automatically renders the track and indicator internally.
| Prop | Type | Default |
|---|---|---|
value | number | null | — |
ProgressLabel
Renders a descriptive label aligned to the start. Accepts all Base UI Progress.Label props.
ProgressValue
Renders the current percentage value aligned to the end. Accepts all Base UI Progress.Value props.
ProgressTrack
The outer bar container. Accepts all Base UI Progress.Track props.
ProgressIndicator
The inner filled bar. Accepts all Base UI Progress.Indicator props.