## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Basic with descriptions


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Vertical, horizontal responsive


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Center aligned with descriptions


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Center aligned, vertical


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Vertical with descriptions


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Compact


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Compact, vertical


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Compact, vertical responsive


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Compact, vertical, centered


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Compact, centered


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Basic with an issue


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Basic with a failure


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Basic with Patternfly icons


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### With help text


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

## 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](/tokens/all-patternfly-tokens). |
| `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
| `.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. |