Progress Stepper

A progress stepper guides users through a process, showing current, completed, and upcoming steps with numbers and text. After each step, a summary text can be displayed with a clickable edit icon.

Horizontal

The horizontal theme is ideal when the content of one step needs to use the whole width of the page and should be the default choice for desktop.

 

Vertical

The vertical theme should be used for narrow viewports and are ideal for mobile.

Progress Stepper

 

Minimal

The minimal progress stepper reduces the process to its essentials by showing the current step as a simple breadcrumb-like indicator. It’s ideal for distraction-free flows where progress context is helpful but should stay visually lightweight, especially in content-first or constrained layouts.

Reduced Progress Stepper

 

Themes

The progress stepper has a responsive behavior by default switching from a horizontal to a vertical layout. It is possible to force one of the two layouts using the theme parameter.