Progress
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Determinate#
Loading…
Indeterminate#
Streaming
Complete#
Done100%
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | undefined | 0 | Numeric progress, 0..max. Ignored when `indeterminate`. |
| max | number | undefined | 100 | Maximum value. Default 100. |
| indeterminate | boolean | undefined | false | When true, shows an indeterminate sliding pill instead of a determinate fill. |
| label | ReactNode | — | Optional visible label (rendered above the bar with the percent). |
| showValue | boolean | undefined | true | When false, hides the percent readout next to the label. Default true. |
| size | "sm" | "md" | "lg" | null | undefined | — | |
| tone | "ok" | "warn" | "err" | "accent" | null | undefined | — |