Progress

A horizontal bar that indicates the completion of a task or process.

Basic Usage

Variants

Sizes

With Label

75%

Gradient fill

Set gradient on the primary variant to use the brand gradient as the fill — useful for hero progress indicators (onboarding, upload).

gradient only applies to variant="primary" — other variants ignore it (semantic colors stay solid for clarity).

Indeterminate

Props

Prop	Type	Default	Description
value	number	0	Current progress value (0-100)
variant	'primary' | 'secondary' | 'success' | 'danger'	'primary'	Color variant
size	'sm' | 'md' | 'lg'	'md'	Height of the progress bar
indeterminate	boolean	false	Shows an animated indeterminate loading bar
showLabel	boolean	false	Shows the percentage label
gradient	boolean	false	Use brand gradient as fill (primary variant only)
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles