Progress
A determinate progress bar for indexing, training and usage. One continuous bar by default, or a stepped row of cells. The fill carries the selected green — progress is a state a thing is in, not an informational note — and the track stays neutral in every tone so a column of bars reads as one control rather than four unrelated ones.
import { Progress } from "@pestoui/core"Default
Segmented
Pass segments to split the bar into that many equal cells. Each cell reports the slice of the range it owns, so a value landing mid-cell part-fills it and the row still reads as one continuous bar rather than a stack of on/off lamps. Use it when the underlying work really is stepped — five uploads, four onboarding stages — and the continuous bar when it is not. Radix keeps ownership of the progressbar role and the aria-value trio in both modes; only what is painted inside the track changes.
Tones
Tone touches the fill and nothing else. selected is the default and the right answer for ordinary progress; success, warning and destructive are for a bar that has become a verdict — a quota crossed, a run that failed part-way. info, muted and chart-1 to chart-5 are for a bar that is a series colour rather than a verdict — one goal of several, one project of a board — where the hue says which thing is measured and nothing about how it is going.
Marker
marker pins decoration to the current value — a knob, a flag — and follows the fill on the same spring. It is aria-hidden, because the progressbar role already reports the value, and it is not drawn while the bar is indeterminate. Content is centred on the value line; give it self-start to hang it from the top edge. Leave a little room around the bar, since a marker at 0% or 100% sticks out by half its width.
Props
Pesto UI · 117 documented components