---
id: 'Progress stepper'
section: components
cssPrefix: pf-v6-c-progress-stepper
---## Examples

### Basic

```html
<ol class="pf-v6-c-progress-stepper" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
    </div>
  </li>
</ol>

```

### Basic with descriptions

```html
<ol class="pf-v6-c-progress-stepper" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Vertical, horizontal responsive

```html
<ol
  class="pf-v6-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-2xl"
  role="list"
>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Center aligned with descriptions

```html
<ol class="pf-v6-c-progress-stepper pf-m-center" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Center aligned, vertical

```html
<ol class="pf-v6-c-progress-stepper pf-m-center pf-m-vertical" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Vertical with descriptions

```html
<ol class="pf-v6-c-progress-stepper pf-m-vertical" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Compact

```html
<ol class="pf-v6-c-progress-stepper pf-m-compact" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-c-spinner pf-m-xs"
          role="progressbar"
          viewBox="0 0 100 100"
          aria-label="Loading..."
        >
          <circle
            class="pf-v6-c-spinner__path"
            cx="50"
            cy="50"
            r="45"
            fill="none"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">In process</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Compact, vertical

```html
<ol class="pf-v6-c-progress-stepper pf-m-vertical pf-m-compact" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Compact, vertical responsive

```html
<ol
  class="pf-v6-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-xl pf-m-compact"
  role="list"
>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Compact, vertical, centered

```html
<ol
  class="pf-v6-c-progress-stepper pf-m-center pf-m-vertical pf-m-compact"
  role="list"
>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Compact, centered

```html
<ol class="pf-v6-c-progress-stepper pf-m-center pf-m-compact" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the first thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the second thing to happen</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
      <div
        class="pf-v6-c-progress-stepper__step-description"
      >This is the last thing to happen</div>
    </div>
  </li>
</ol>

```

### Basic with an issue

```html
<ol class="pf-v6-c-progress-stepper" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-warning"
    role="listitem"
    aria-label="step with issue,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Fourth step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Fifth step</div>
    </div>
  </li>
</ol>

```

### Basic with a failure

```html
<ol class="pf-v6-c-progress-stepper" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">First step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current pf-m-danger"
    role="listitem"
    aria-label="current step,step with failure,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Fourth step</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Fifth step</div>
    </div>
  </li>
</ol>

```

### Basic in process

```html
<ol class="pf-v6-c-progress-stepper" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Successful completion</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-c-spinner pf-m-xs"
          role="progressbar"
          viewBox="0 0 100 100"
          aria-label="Loading..."
        >
          <circle
            class="pf-v6-c-spinner__path"
            cx="50"
            cy="50"
            r="45"
            fill="none"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">In process</div>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-pending" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Pending</div>
    </div>
  </li>
</ol>

```

### With help text

```html
<ol class="pf-v6-c-progress-stepper" role="list">
  <li
    class="pf-v6-c-progress-stepper__step pf-m-success"
    role="listitem"
    aria-label="completed step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <button
        class="pf-v6-c-progress-stepper__step-title pf-m-help-text"
        type="button"
      >First step</button>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-danger"
    role="listitem"
    aria-label="step with failure,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
          />
        </svg>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <button
        class="pf-v6-c-progress-stepper__step-title pf-m-help-text"
        type="button"
      >Second step</button>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-current"
    role="listitem"
    aria-label="current step,in process step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon">
        <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
      </span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <button
        class="pf-v6-c-progress-stepper__step-title pf-m-help-text"
        type="button"
      >Third step</button>
    </div>
  </li>
  <li
    class="pf-v6-c-progress-stepper__step pf-m-pending"
    role="listitem"
    aria-label="pending step,"
  >
    <div class="pf-v6-c-progress-stepper__step-connector">
      <span class="pf-v6-c-progress-stepper__step-icon"></span>
    </div>
    <div class="pf-v6-c-progress-stepper__step-main">
      <div class="pf-v6-c-progress-stepper__step-title">Fourth step</div>
    </div>
  </li>
</ol>

```

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