- React
- HTML

## Examples

### Basic

### Basic with descriptions

### Vertical, horizontal responsive

### Center aligned with descriptions

### Center aligned, vertical

### Vertical with descriptions

### Compact

### Compact, vertical

### Compact, vertical responsive

### Compact, vertical, centered

### Compact, centered

### Basic with an issue

### Basic with a failure

### Basic with Patternfly icons

### With help text

## 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.

##
CSS variables