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 Attributes

NameDescriptionTypeAccepted ValuesDefault
spacethe spacing of each step, will be responsive if omitted. Supports percentage.number / string
directiondisplay directionstringvertical/horizontalhorizontal
activecurrent activation stepnumber0
process-statusstatus of current stepstringwait / process / finish / error / successprocess
finish-statusstatus of end stepstringwait / process / finish / error / successfinish
align-centercenter title and descriptionbooleanfalse
simplewhether to apply simple themeboolean-false

Steps Slots

-customize default contentStep

Step Attributes

NameDescriptionTypeAccepted ValuesDefault
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.stringwait / process / finish / error / success

Step Slots

iconcustom icon
titlestep title
descriptionstep description