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
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "information" | "accent" | "success" | "warning" | "danger" | "primary" | Semantic indicator color. |
size | "sm" | "md" | "lg" | "md" | Track height. Brutal maps each size slightly taller than Elegant. |
...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, ...). |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Label and value row rendered above the track. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Label.Props | — | Accessible component label shown inside the header row. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Value.Props | — | Formatted current value shown inside the header row. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Track.Props | — | Full-width track behind the indicator. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Progress.Indicator.Props | — | Filled portion of the track. |