Content
UI Element: Step
12 of 12
1. Button
2. Divider
3. Header
4. Icon
5. Image
6. Input
7. Label
8. Loader
9. Progress
10. Reveal
11. Segment
12. Step
Menu

Step

Steps show the current activity in a series of consecutive activities.

Definition Mode
Element Groups Types States Variations

Standard

Step

A step

Shipping

Groups

Steps

A set of step

Shipping
Billing
Confirm Order
Complete

Types

Vertical

Vertical steps display each step stacked vertically

Vertical steps items can include a two line variation to allow for long names or names with line breaks
Shipping
Billing & Order
Confirmation
Review
Receipt

States

Active

A step can be highlighted as active

Billing

Disabled

A step can show that it cannot be selected

Billing

Variations

Size

Steps can have different sizes

Shipping
Billing
Confirm Order
Complete


Shipping
Billing
Confirm Order
Complete

Step

Steps can be divided evenly inside their parent

Shipping
Billing
Confirm Order
Complete