Steps

Steps is a component set for displaying a sequence of stages in a process or workflow. It helps users visualize progress through a multi-step journey with customizable colors and orientations.

Basic Usage

  • Register
  • Choose plan
  • Purchase
  • Receive Product
Code Example
1.vue

Components

The Steps components include the following:

  • Steps - A container for displaying a sequence of steps in a process.
  • Step - An individual step in a process.
  • StepIcon - A container for custom step icons.

Steps

The Steps component wraps multiple Step components to display a sequence of stages in a process or workflow.

Steps Props Type Description
orientation
string

Sets the orientation of the steps. Options: - vertical - horizontal (default)

   
vertical
boolean

Shortcut for orientation="vertical". Creates vertical steps.

   
horizontal
boolean

Shortcut for orientation="horizontal". Creates horizontal steps. This is the default.

Steps Slots Description
default

The default slot. Content to be displayed inside the steps container. Typically contains Step components.

Step

The Step component represents an individual stage in a process or workflow. It can be customized with different colors and glyphs.

Step Props Type Description
glyph
string

Allows placing a custom character or emoji in the step's circle. If not provided, the step will display a number based on its position. For more complex icons, consider using the StepIcon component instead.

color
string

Sets the color of the step. Options: - neutral - primary - secondary - accent - info - success - warning - error

   
neutral
boolean

Shortcut for color="neutral".

   
primary
boolean

Shortcut for color="primary".

   
secondary
boolean

Shortcut for color="secondary".

   
accent
boolean

Shortcut for color="accent".

   
info
boolean

Shortcut for color="info".

   
success
boolean

Shortcut for color="success".

   
warning
boolean

Shortcut for color="warning".

   
error
boolean

Shortcut for color="error".

Step Slots Description
default

The default slot. Content to be displayed as the step label.

StepIcon

The StepIcon component provides a container for custom icons within a step.

StepIcon Slots Description
default

The default slot. Content to be displayed as the custom icon, typically an SVG or icon component.

Examples

Horizontal Steps

A sequence of steps in a horizontal layout.

  • Register
  • Choose plan
  • Purchase
  • Receive Product
Code Example
1.vue

Vertical Steps

A sequence of steps in a vertical layout.

  • Register
  • Choose plan
  • Purchase
  • Receive Product
Code Example
2.vue

Responsive Steps (Vertical on Mobile, Horizontal on Desktop)

Steps that are vertical by default but switch to horizontal on large screens.

  • Register
  • Choose plan
  • Purchase
  • Receive Product
Code Example
3.vue

Steps with Glyphs

Steps using custom glyphs or characters.

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
  • Step 6
  • Step 7
  • Final
Code Example
4.vue

Steps with Colors and Glyphs

Steps using color props and glyphs for error/info states.

  • Fly to moon
  • Shrink the moon
  • Grab the moon
  • Sit on toilet
Code Example
5.vue

Many Steps with Mixed Colors

A long sequence of steps with mixed color props.

  • start
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • end
Code Example
6.vue