--- id: 'Progress stepper' beta: true section: components cssPrefix: pf-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
``` ### 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
``` ### 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
``` ### 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
  1. First step
  2. Second step
  3. Third step
  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-c-progress-stepper__step` | Provides an accessible label for the step. | | `aria-hidden="true"` | `.pf-c-progress-stepper__step-icon ` | Hides icon for assistive technologies. **Required** | ### Usage | Class | Applied to | Outcome | | ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `.pf-c-progress-stepper` | `
    ` | Applies default progress stepper styling. **Required** | | `.pf-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` | `
    ` | Contains the title of the step. | | `.progress-stepper__step-description` | `
    ` | Contains the description of the step. | | `.pf-m-center` | `.pf-c-progress-stepper` | Modifies to center each step. | | `.pf-m-vertical` | `.pf-c-progress-stepper` | Modifies for vertical orientation. | | `.pf-m-compact` | `.pf-c-progress-stepper` | Modifies for compact styling. | | `.pf-m-success` | `.pf-c-progress-stepper__step` | Modifies for success styling. | | `.pf-m-warning` | `.pf-c-progress-stepper__step` | Modifies for warning styling. | | `.pf-m-danger` | `.pf-c-progress-stepper__step` | Modifies for danger styling. | | `.pf-m-info` | `.pf-c-progress-stepper__step` | Modifies for info styling. | | `.pf-m-current` | `.pf-c-progress-stepper__step` | Modifies styling for the current step. | | `.pf-m-pending` | `.pf-c-progress-stepper__step` | Modifies styling for pending steps. | | `.pf-m-help-text` | `.pf-c-progress-stepper__step-title` | Modifies styling for steps that have help text. |