Progress
A determinate or indeterminate bar in the caller's scale
30 of 120 · 25%
Complete · 100%
Preparing archive · loading
Usage
import {
Progress,
ProgressLabel,
ProgressValue,
} from "@gpuixui/components/progress";
<Progress value={30} max={120} label="Uploading">
<ProgressLabel />
<ProgressValue />
</Progress>;value and max are the caller's units: 30 of 120 above paints the same
quarter-full bar as 25 of 100. Omit value — or pass the null JSON writes
for a field a record never carried — for the indeterminate segment.
Composition
Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
└── ProgressIndicatorThe root always paints the track and its fill after the children, so a caller who composes only the label and the value still gets a bar. The four parts read the root's state, so a share is computed once.
API
| Part | Prop | Type | Default |
|---|---|---|---|
Progress | value | number | null | — (indeterminate) |
Progress | max | number | 100 |
Progress | tone | "primary" | "success" | "destructive" | "muted" | "primary" |
Progress | size | "sm" | "md" | "md" |
Progress | label | string | — |
Progress | formatValue | (percent: number) => string | `${percent}%` |
Progress | loadingText | string | the provider's loading word |
Progress | reducedMotion | boolean | the motion provider |
Progress | children | ReactNode | the track |
Progress | style | StyleDesc | — |
Progress | className | string | — |
Progress | testId | string | — |
Progress | ref / aria-id / onLayout | host props | — |
ProgressTrack | style, className, testId | — | — |
ProgressIndicator | style, className, testId | — | — |
ProgressLabel | children, testId | ReactNode, string | the root's label |
ProgressValue | testId | string | — |
Edit this page on GitHubpackages/components/docs/progress.mdx