PatternFly Elements

Progress Stepper

Overview

A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.

Completed Issue Failure Running Last

Installation

npm install @patternfly/elements

Usage

  <pf-progress-stepper>
<pf-progress-step variant="success">Completed</pf-progress-step>
<pf-progress-step variant="warning">Issue</pf-progress-step>
<pf-progress-step variant="danger">Failure</pf-progress-step>
<pf-progress-step current variant="info">Running</pf-progress-step>
<pf-progress-step>Last</pf-progress-step>
</pf-progress-stepper>

Slots

None

Slots on pf-progress-step

Default Slot

Short description of the current step.

description

Longer description of the current step.

icon

Overrides the icon property

Attributes

vertical

Whether to use the vertical layout

DOM Property
vertical
Type
boolean
Default
false
center

Whether to use the center alignment

DOM Property
center
Type
boolean
Default
false
compact

Whether to use the compact layout

DOM Property
compact
Type
boolean
Default
false

Methods

None

Events

None

CSS Custom Properties

None

CSS Shadow Parts

None

© 2018-2023 Red Hat, Inc. Deploys by Netlify