--- id: 'Progress stepper' section: components cssPrefix: pf-v5-c-progress-stepper ---## Examples ### Basic ```html
  1. First step
  2. Second step
  3. Third step
``` ### Basic with descriptions ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Vertical, horizontal responsive ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Center aligned with descriptions ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Center aligned, vertical ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Vertical with descriptions ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Compact ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Compact, vertical ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Compact, vertical responsive ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Compact, vertical, centered ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Compact, centered ```html
  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen
``` ### Basic with an issue ```html
  1. First step
  2. Second step
  3. Third step
  4. Fourth step
  5. Fifth step
``` ### Basic with a failure ```html
  1. First step
  2. Second step
  3. Third step
  4. Fourth step
  5. Fifth step
``` ### Basic with Patternfly icons ```html
  1. Successful completion
  2. In process
  3. Pending
``` ### With help text ```html
  4. 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`, and `.pf-m-info` 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-v5-c-progress-stepper__step` | Provides an accessible label for the step. | | `aria-hidden="true"` | `.pf-v5-c-progress-stepper__step-icon ` | Hides icon for assistive technologies. **Required** | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-progress-stepper` | `
    ` | Applies default progress stepper styling. **Required** | | `.pf-v5-c-progress-stepper__step` | `
  1. ` | Defines each step of the progress stepper. **Required** | | `.progress-stepper__step-connector` | `
    ` | Creates the connecting line between steps **Required** | | `.progress-stepper__step-icon` | `` | 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` | `
    ` | 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` | `
    `, `