Progress stepper

A progress stepper displays a timeline of tasks in a workflow and tracks a user's progress through the workflow.

Examples

Basic

First step
Second step
Third step

Basic with descriptions

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Vertical, horizontal responsive

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Center aligned with descriptions

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Center aligned, vertical

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Vertical with descriptions

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Compact

First step

This is the first thing to happen
In process

This is the second thing to happen
Third step

This is the last thing to happen

Compact, vertical

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Compact, vertical responsive

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Compact, vertical, centered

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Compact, centered

First step

This is the first thing to happen
Second step

This is the second thing to happen
Third step

This is the last thing to happen

Basic with an issue

First step
Second step
Third step
Fourth step
Fifth step

Basic with a failure

First step
Second step
Third step
Fourth step
Fifth step

Basic in process

Successful completion
In process
Pending

With help text

Fourth step

Documentation

Overview

The progress stepper is intended to show progress through a finite number of discrete steps.

Add a modifier class to the progress stepper to change the orientation or alignment: .pf-m-center, .pf-m-vertical, or .pf-m-compact.

Steps can be modified with .pf-m-success, .pf-m-warning, .pf-m-danger, .pf-m-info, .pf-m-custom, and .pf-m-in-progress-alt to change their color. Use modifiers .pf-m-pending and .pf-m-current to indicate progress through the steps.

Accessibility

Attribute	Applied to	Outcome
`aria-label="[State of the step]"`	`.pf-v6-c-progress-stepper__step`	Provides an accessible label for the step.
`aria-hidden="true"`	`.pf-v6-c-progress-stepper__step-icon <i>`	Hides icon for assistive technologies. Required

Usage

Class	Applied to	Outcome
`.pf-v6-c-progress-stepper`	`<ol>`	Applies default progress stepper styling. Required
`.pf-v6-c-progress-stepper__step`	`<li>`	Defines each step of the progress stepper. Required
`.progress-stepper__step-connector`	`<div>`	Creates the connecting line between steps Required
`.progress-stepper__step-icon`	`<span>`	Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. Required
`.progress-stepper__step-main`	`<div>`	Contains the main text content of the step. This element is required, but may be empty if title and description are not used. Required
`.progress-stepper__step-title`	`<div>`, `<button>`	Contains the title of the step. Note: the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text.
`.progress-stepper__step-description`	`<div>`	Contains the description of the step.
`.pf-m-center`	`.pf-v6-c-progress-stepper`	Modifies to center each step.
`.pf-m-vertical{-on-[breakpoint]}`	`.pf-v6-c-progress-stepper`	Modifies progress stepper vertical layout at optional breakpoint.
`.pf-m-horizontal{-on-[breakpoint]}`	`.pf-v6-c-progress-stepper`	Modifies progress stepper horizontal layout at optional breakpoint.
`.pf-m-compact`	`.pf-v6-c-progress-stepper`	Modifies for compact styling.
`.pf-m-success`	`.pf-v6-c-progress-stepper__step`	Modifies for success styling.
`.pf-m-warning`	`.pf-v6-c-progress-stepper__step`	Modifies for warning styling.
`.pf-m-danger`	`.pf-v6-c-progress-stepper__step`	Modifies for danger styling.
`.pf-m-info`	`.pf-v6-c-progress-stepper__step`	Modifies for info styling.
`.pf-m-custom`	`.pf-v6-c-progress-stepper__step`	Modifies for custom styling.
`.pf-m-current`	`.pf-v6-c-progress-stepper__step`	Modifies styling for the current step.
`.pf-m-pending`	`.pf-v6-c-progress-stepper__step`	Modifies styling for pending steps.
`.pf-m-help-text`	`.pf-v6-c-progress-stepper__step-title`	Modifies styling for steps that have help text.

Edit this page on GitHub