Feedback · Application UI
Progress
A linear progress bar built on Base UI that displays a labeled, accessible indicator of completion with optional label and numeric value display, plus token-driven intent tones (brand, success, warning, destructive).
Feature showcase
Installation
Features
6 examples
Default, Tones, Controlled, Indeterminate, Sizes, With Format.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | - | The current progress value (typically 0–100). Pass null for indeterminate state. |
| tone | "default" | "brand" | "success" | "warning" | "destructive" | "default" | Colors the indicator bar via semantic tokens, e.g. success for complete, warning/destructive for at-risk. |
| className | string | - | Additional CSS class names applied to the root wrapper element. |
| children | React.ReactNode | - | Optional children rendered inside the root before the built-in track (e.g. ProgressLabel, ProgressValue). |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/progress.tsx |
| Default example | content/examples/progress/default.tsx |
| Tones example | content/examples/progress/tones.tsx |
| Controlled example | content/examples/progress/controlled.tsx |
| Indeterminate example | content/examples/progress/indeterminate.tsx |
| Sizes example | content/examples/progress/sizes.tsx |
| With Format example | content/examples/progress/with-format.tsx |