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 have four variations in two orientations — horizontal standard, horizontal inline, vertical standard, and vertical expandable.

steps-variations.png

Steps can have one of four different states — complete, active, incomplete or disabled.

steps-states.png

Steps can be displayed in medium and small sizes.

steps-sizes.png
  • Do not put numbers in the circle indicator of a step.
  • It is OK to use numbers in a label if necessary.
  • Keep descriptions concise and use expandable descriptions if necessary.