Progress steps

Overview

A component that gives the user a visual representation of the current state of their progress through an application (typically a multistep form).

Installation

npm install @patternfly/pfe-progress-steps

Usage

  <pfe-progress-steps>
    <pfe-progress-steps-item state="active" current>
      <div slot="title">Current</div>
      <a slot="link" href="#">View current step</a>
    </pfe-progress-steps-item>
    <pfe-progress-steps-item>
      <div slot="title">Next</div>
      <a slot="link" href="#">View next step</a>
    </pfe-progress-steps-item>
    <pfe-progress-steps-item>
      <div slot="title">Last</div>
      <a slot="link" href="#">View last step</a>
    </pfe-progress-steps-item>
  </pfe-progress-steps>

Attributes

pfe-progress-steps

• vertical: Describe each available attribute and what function is serves.

pfe-progress-steps-item

• current: Indicates if this item is the current active item.
• state: Describes the state of the current item; allows "inactive", "done", or "error".

Styling hooks

Available hooks for styling: