kapable

Progress

Data display · 1 export · v0.1.0 · showcase

Determinate bar or ring with a complete accessible progress contract.

Browse 72 component families

Preview

42%

3 of 8

Usage

<Progress value={3} max={8} label="Migration steps" readout="3 of 8" />

Progress props
prop	type	notes
value	number	Current value, clamped to [0, max].
max?	number	Upper bound (default 100).
label	string	Accessible name — WHAT is progressing ("Upload", "Build launchpad").
readout?	boolean \| string	Right-aligned mono readout: `true` renders the percentage, a string renders verbatim ("3 of 8"). Off by default.
size?	'sm' \| 'md'	Channel height: 'md' (6px, default) or 'sm' (4px, for dense rows).
variant?	'bar' \| 'ring'	'bar' (default) or 'ring' — the compact dashboard form (28px, beside a Stat). The readout sits right of the ring, same as the bar.
mix?	MixInput