A progress indicator for displaying task completion. Consists of a track
(background bar), an indicator (filled portion), and an optional label area.
| Prop | Type | Description |
|---|
value | number | Current progress value. Negative values are clamped to 0. |
hint? | string | Right-aligned hint text (e.g. "3 of 7"). |
label? | string | Text label displayed after the percentage. |
max? | number | Upper bound of the range. Defaults to 100. |
tone? | 'neutral' | 'info' | Color variant. `'info'` applies a blue tint. |
Inherited props (children, className, style)
| Prop | Type | Description |
|---|
children? | ReactNode | Child elements. When provided, replaces the component's default label/content. |
className? | string | CSS class name. Merged with any internal classes by the component. |
style? | CSSProperties | Inline styles applied to the root element. |
<Progress value={42} label="Uploading files..." hint="3 of 7" />
<Progress value={75} tone="info" label="Processing" />
Progress uses these CSS custom properties for theming:
| Token | Description |
|---|
--progress-indicator-bg | Indicator bar fill color |
--progress-indicator-edge | Gradient fade at the indicator’s leading edge |
--progress-label-color | Color for the percentage number |