COMPONENTS

Steps

Steps visualize a set of related steps or a sequence of process defined by user milestones.

steps-intro.png
steps-anatomy.png
  1. Completion Indicator
  2. Connecting Bar
  3. Label

Steps are available in two orientations — horizontal or vertical.

Steps Orientation

Secondary labels can be used when needed to provide additional context.

Steps secondary label

Inline labels are available for the horizontal orientation of steps.

Steps Inline

Labels can be hidden to allow the Steps component to fill the container.

Steps Inline

A step summary can be shown when labels are hidden. The step summary allows the user to see the label of the current step directly below the step group and is recommended for smaller screens and responsive mobile views.

Steps Inline

Step items have six status values available — incomplete, active, complete, disabled, error or warning.

Steps Status

Steps in vertical orientation can be set to be expandable and show more content.

Steps Status

Steps can be displayed in medium and small sizes.

steps-sizes.png

Steps are often used to build a Stepped Progression or Wizard.

Steps Wizard Example