Progress

A progress indicator for displaying task completion. Consists of a track (background bar), an indicator (filled portion), and an optional label area.

Preview

The minimum invocation — just a value.

value — Current progress value. Negative values are clamped to 0.

max? — Upper bound of the range. Defaults to 100.

tone? — Color variant. `'info'` applies a blue tint.

label? — Text label displayed after the percentage.

hint? — Right-aligned hint text (e.g. "3 of 7").

className? — CSS class name. Merged with any internal classes by the component.

style? — Inline styles applied to the root element.

CSSProperties

children? — Child elements. When provided, replaces the component's default label/content.

ReactNode

Component tokens

Progress exposes these CSS custom properties as its theming surface. Override any of them in consumer CSS to retint a single instance, or set them on a [tone="…"] selector to add a new tone variant. Tokens marked (shadow-only API) style elements inside the shadow DOM and can only be customized via these properties — consumer CSS can’t reach those elements directly.

Token	Description
`--progress-bg`	Host background (the track behind the indicator).
`--progress-border-color`	Host border colour. Also one endpoint of the indicator-edge gradient.
`--progress-indicator-bg` (shadow-only API)	Indicator fill colour. Also the start endpoint of the indicator-edge gradient.
`--progress-indicator-edge` (shadow-only API)	Gradient painted at the indicator’s right edge. Defaults to `linear-gradient(90deg in oklch, var(--progress-indicator-bg), var(--progress-border-color))`.
`--progress-text-color`	Colour of the percentage number and the label text.
`--progress-hint-color`	Colour of the right-aligned hint text.