Progress

Quick Preview

Profile

68%

Use this public composition when building Progress:

Progress
├── ProgressLabel
├── ProgressTrack
│   └── ProgressIndicator
└── ProgressValue

<Progress value={65}><ProgressTrack><ProgressIndicator /></ProgressTrack></Progress>

Use size to scale linear and circular progress indicators consistently.

72%

Prop/API	Type	Default	Description
`size`	`"sm"	"md"	"lg"`
`disabled`	`boolean`	`false`	Muted disabled state.
`labelOverlay` on CircularProgress	`boolean`	`false`	Places value text inside circle.
`pixelSize` on CircularProgress	`number`	size preset	Overrides the rendered SVG size in pixels.
`strokeWidth` on CircularProgress	`number`	size preset	Overrides the rendered SVG stroke width in pixels.
`strokeLinecap` on CircularProgress	`"round" \| "butt" \| "square"`	`"round"`	Controls arc end caps. Use `butt` for tiny rings where caps distort the visible remainder.
`children` on CircularProgress	`ReactNode`	percentage label	Replaces the default value label with custom center content.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Preserve the documented Progress composition so labels, triggers, content, and controls remain connected.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.