Metrics & Status

ProgressBar

Progress track for tasks or batches, with optional labels. Use Meter instead for quota readouts.

Props

ProgressBar extends HTMLAttributes<HTMLDivElement>. Renders as role="progressbar".

ProgressBarProps props

Prop	Type	Default	Description
`value`	`number`	`0`	Fill percentage, 0–100. Ignored when indeterminate.
`tone`	`ProgressTone`	`"primary"`	"primary" \| "ok" \| "warn" \| "err".
`indeterminate`	`boolean`	—	Sliding shimmer for unknown durations.
`label`	`ReactNode`	—	Right-aligned mono label above the track (e.g. '64%', '312 / 488').
`labelLeft`	`ReactNode`	—	Left-aligned label above the track (e.g. 'Uploading files…').

ProgressBar tones

ProgressBar indeterminate

Uploading files…64%

Processing records312 / 488

ProgressBar with labels

ImportTSX

import { ProgressBar } from "@solarius/onset";
import type { ProgressBarProps, ProgressTone } from "@solarius/onset";