← All matrices

Progress

3 sizes × 5 tones × determinate / indeterminate + label/hint slots.

Source react/src/atoms/Progress.tsx Bundle 1.02 KB min / 0.59 KB gz LOC 66

Tone × Value (size = md)

Tone	0 %	25 %	60 %	100 %	Indeterminate
primary
success
warning
danger
info

Size axis (tone = primary, value = 60%)

Size	Bare	With label + hint
sm		Uploading60%
md		Uploading60%
lg		Uploading60%

Props: value, max, size (sm|md|lg), tone (primary|success|warning|danger|info), indeterminate, label, hint.
ARIA: role="progressbar" + aria-valuemin/max/now.