Progress
The Progress component visualizes task completion through a segmented bar. It helps users understand how far along a process is, providing clear feedback on multi-step workflows.
60%
tsx
Default
A segmented progress bar with discrete steps and ARIA progressbar semantics.
Sizes
Two heights: sm (4px) and md (8px, default).
sm
md
Steps
Controls the number of discrete segments. Defaults to 5.
3 steps
5 steps (default)
10 steps
Label Position
Shows the percentage label to the right or bottom of the bar.
none (default)
right
60%
bottom
60%
Interactive
Drag the buttons to change the progress value and see the bar update in real time.
60%
60%