Primitives
Progress
A determinate or indeterminate progress bar
Uploading · 42%
Indeterminate · loading
Usage
import { Progress, Stack, Text } from "@gpuixui/primitives";
<Stack direction="column" gap="xs">
<Text role="caption" tone="muted">Uploading · 42%</Text>
<Progress value={42} label="Uploading" />
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | number | — | 0–100 determinate fill; omit for indeterminate, and a stored null — or any value that is not a number — reads as omitted |
buffer | number | none | 0–100 held-ahead point; paints the segment between value and itself, and a stored value that is not a number paints no segment |
tone | primary | success | destructive | muted | "primary" | the fill's colour role; a stored name the table does not carry reads as primary |
size | "sm" | "md" | "md" | track height from spacing.xs/sm; a stored name the table does not carry reads as md |
label | string | none | accessible name, and ProgressLabel's default text; a blank label is no name, and a caption child that says nothing falls back to it rather than painting a blank line |
formatValue | (percent: number) => string | `${percent}%` | the announced and painted share; a blank answer keeps the default |
loadingText | string | loading.indeterminate ("loading") | what an indeterminate bar says instead of a percentage; a blank one keeps the provider's |
reducedMotion | boolean | the motion provider | holds the indeterminate segment; no effect with value. The prop overrides the provider |
children | ReactNode | the track | the parts to draw |
style | StyleDesc | — | merged last, on the root frame |
className | string | — | Tailwind classes, joined last on the root frame |
ref / aria-id / onLayout | host props | none | the root frame itself: the box a layout measures, the instance a caller holds, and the author id an automation host addresses |
testId | string | — | stable locator, on the root |
A widget record kept in JSON stores a share it never learned as null rather than undefined. That reads as absent, like an omitted prop: the bar paints the moving segment and says the loading word, while 0 remains the empty share it names. A share that is not a number at all is the same absence — text a store wrote, or a field a decoder could not read — because the library does not turn text into a number here (parseNumberText is the explicit seam that does). Read as a measurement it would paint width: "NaN%" and announce "NaN%": a bar with no fill that still claims a value.
Edit this page on GitHubpackages/primitives/docs/progress.mdx