Progress
A themed Base UI progress primitive for uploads, generation, and long-running tasks.
Uploading transcript
Controls
import { Progress, ProgressIndicator, ProgressTrack } from "raft-ui";
<Progress value={64}>
<ProgressTrack>
<ProgressIndicator />
</ProgressTrack>
</Progress>primary
success
warning
danger
Use indeterminate progress when work has started but a reliable completion percentage is not available yet.
Generating response
ProgressValue is optional. Omit it when a visible percentage would not help the reader; ProgressLabel still provides the accessible name.
Uploading transcript
Keep file-processing context in consumer UI and use the compact progress parts for status within that layout.
example-document.txtProcessing
Processing example-document.txt
variantdefault: "primary""primary" | "information" | "accent" | "success" | "warning" | "danger"
Semantic indicator color.
sizedefault: "md""sm" | "md" | "lg"
Track height: 6px at sm, 8px at md, 10px at lg.
...propsBase UI Progress.Root.Props
All native div attributes plus the remaining Base UI Progress.Root props (value, min, max, render, format, locale, aria-valuetext, ...).
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "information" | "accent" | "success" | "warning" | "danger" | "primary" | Semantic indicator color. |
size | "sm" | "md" | "lg" | "md" | Track height: 6px at sm, 8px at md, 10px at lg. |
...props | Base UI Progress.Root.Props | — | All native div attributes plus the remaining Base UI Progress.Root props (value, min, max, render, format, locale, aria-valuetext, ...). |
...propsComponentPropsWithRef<"div">
Label and value row rendered above the track.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Label and value row rendered above the track. |
...propsBase UI Progress.Label.Props
Accessible component label shown inside the header row.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Label.Props | — | Accessible component label shown inside the header row. |
...propsBase UI Progress.Value.Props
Formatted current value shown inside the header row.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Value.Props | — | Formatted current value shown inside the header row. |
...propsBase UI Progress.Track.Props
Full-width track behind the indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Track.Props | — | Full-width track behind the indicator. |
...propsBase UI Progress.Indicator.Props
Filled portion of the track.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Indicator.Props | — | Filled portion of the track. |