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