Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.

Basic usage

Simple step bar.

Step bar that contains status

Shows the status of the step for each step.


Title and description can be centered.

Step bar with description

There is description for each step.

Step bar with icon

A variety of custom icons can be used in the step bar.

Vertical step bar

Vertical step bars.

Simple step bar

Simple step bars, where align-center, description, direction and space will be ignored.

Steps API

Steps Attributes

spacethe spacing of each step, will be responsive if omitted. Supports percentage.number / string''
directiondisplay directionenumhorizontal
activecurrent activation stepnumber0
process-statusstatus of current stepenumprocess
finish-statusstatus of end stepenumfinish
align-centercenter title and descriptionboolean
simplewhether to apply simple themeboolean

Steps Slots

defaultcustomize default contentStep

Step API

Step Attributes

titlestep titlestring''
descriptionstep descriptionstring''
iconstep custom icon. Icons can be passed via named slot as wellstring / Component
statuscurrent status. It will be automatically set by Steps if not configured.enum''

Step Slots

iconcustom icon
titlestep title
descriptionstep description