PatternFly Elements - Home PatternFly Elements

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).

Current
View current step
Next
View next step
Last
View last step

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>

Slots

None

Slots on pfe-progress-steps-item

title

Short description of the current step.

description

Longer decscription of the current step.

link

Anchor tag that will be visually hidden in the shadowRoot. When the link is present, it will make this item clickable. All click events will forwarded to this anchor tag.

Attributes

vertical
DOM Property
vertical
Type
boolean
Default
false

Attributes on pfe-progress-steps-item

state

Describes the state of the current item; allows "inactive", "done", or "error".

DOM Property
state
Type
'active'|'inactive'|'done'|'error'
Default
'inactive'
vertical
DOM Property
vertical
Type
boolean
Default
false
current

Indicates if this item is the current active item.

DOM Property
current
Type
boolean
Default
false
is-link
DOM Property
isLink
Type
boolean
Default
false

DOM Properties

None

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pfe-progress-steps__item--Width

item

 var(--pfe-theme--ui--element--size--lg, 75px)
--pfe-progress-steps__circle--Size

circle

 var(--pfe-theme--ui--element--size--md, 32px)
--pfe-progress-steps__progress-bar--Color

progress

 var(--pfe-theme--color--ui--border--lighter, #d2d2d2)
--pfe-progress-steps__progress-bar--Fill

progress

 var(--pfe-theme--color--ui-accent, #06c)
--pfe-progress-steps__progress-bar--Width

progress

 var(--pfe-theme--ui--border-width--md, 2px)

CSS Properties on pfe-progress-steps-item

CSS Property Description Default
--pfe-progress-steps-item--Width auto
--pfe-progress-steps-item--MinHeight--vertical var(--pfe-progress-steps__item--Width, var(--pfe-theme--ui--element--size--lg, 75px))
--pfe-progress-steps-item__circle--Size

circle

 var(--pfe-theme--ui--element--size--md, 32px)
--pfe-progress-steps-item__circle--Color

circle

 var(--pfe-theme--color--feedback--info, #06c)
--pfe-progress-steps-item__circle--Color--hover

circle

 var(--pfe-theme--color--feedback--info, #06c)
--pfe-progress-steps-item__circle--Color--focus

circle

 var(--pfe-theme--color--feedback--info, #06c)
--pfe-progress-steps-item__circle--Background

circle

 radial-gradient(circle, white 60%, rgba(255, 255, 255, 0) 61%)
--pfe-progress-steps-item__circle--Width

circle

 var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))
--pfe-progress-steps-item__circle--Height

circle

 var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))
--pfe-progress-steps-item__circle-wrapper--Width

circle

 var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)))
--pfe-progress-steps-item__circle-wrapper--Height

circle

 var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)))
--pfe-progress-steps-item__title--Color

title

 var(--pfe-theme--color--text, #151515)
--pfe-progress-steps-item__title--Color--active

title

 var(--pfe-theme--color--feedback--info, #06c)
--pfe-progress-steps-item__title--Color--error

title

 var(--pfe-theme--color--feedback--critical--lighter, #c9190b)
--pfe-progress-steps-item__title--MarginTop--vertical

title

 calc( var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) / 6)
--pfe-progress-steps-item__description--Color

description

 var(--pfe-theme--color--text--muted, #6a6e73)
--pfe-progress-steps-item__description--Color--error

description

 var(--pfe-theme--color--feedback--critical--lighter, #c9190b)
--pfe-progress-steps-item--spacer var(--pfe-theme--content-spacer--body--sm, 0.5rem)
--pfe-progress-steps-item__circle-inner--Width

circle

 calc( var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2)
--pfe-progress-steps-item__circle-inner--Height

circle

 calc( var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2)
--pfe-progress-steps-item__circle-outer--Width

circle

 var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)))
--pfe-progress-steps-item__circle-outer--Height

circle

 var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)))

CSS Shadow Parts

progress-bar

container for the progress-bar element

Parts on pfe-progress-steps-item

circle

container for the step circle graphic

content

container for the step content (title and description)

title

container for the step title

description

container for the step description