Search
Steps

Steps is a navigation bar that guides users through the steps of a task.

Steps

When to use

When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.


Basic

The most basic step bar.
Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.

Mini version

By setting like this: <Steps size="small">, you can get a mini version.
Finished
2
In Progress
3
Waiting

With icon

You can use your own custom icons by setting the property icon for Steps.Step.
Login
Verification
Pay
Done

Switch Step

Cooperate with the content and buttons, to represent the progress of a process.
1
First
2
Second
3
Last
First-content

Vertical

A simple step bar in the vertical direction.
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

Vertical mini version

A simple step bar in the vertical direction.
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

Error status

By using status of Steps, you can specify the state for current step.
Finished
This is a description
In Process
This is a description
3
Waiting
This is a description

Dot Style

Steps with progress dot style.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Finished
This is a description. This is a description.
In Progress
This is a description. This is a description.
Waiting
This is a description.

Customized Dot Style

You can customize the display for Steps with progress dot style.
Finished
You can hover on the dot.
In Progress
You can hover on the dot.
Waiting
You can hover on the dot.
Waiting
You can hover on the dot.

Clickable

Setting onChange makes Steps clickable.
1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.
1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.
Navigation steps.
Step 1
00:00:05
This is a description.
2
Step 2
00:01:02
This is a description.
3
Step 3
waiting
This is a description.
Step 1
2
Step 2
3
Step 3
4
Step 4
finish 1
finish 2
3
current process
4
wait

Steps with progress

Steps with progress.
Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.

API

Steps
PropertyDescriptionTypeDefault
className
Additional class to Steps
string
-
type
Type of steps, can be set to one of the following values: default, navigation
string
default
current
To set the current step, counting from 0. You can overwrite this state by using status of Step
number
0
direction
To specify the direction of the step bar, horizontal or vertical
string
horizontal
labelPlacement
Place title and description with horizontal or vertical direction
string
horizontal
progressDot
Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
Boolean or (iconDot, {index, status, title, description}) => ReactNode
false
size
To specify the size of the step bar, default and small are currently supported
string
default
status
To specify the status of current step, can be set to one of the following values: wait process finish error
string
process
initial
Set the initial step, counting from 0
number
0
onChange
Trigger when Step is changed
(current) => void
-
Steps.Step
PropertyDescriptionTypeDefault
description
Description of the step, optional property
string|ReactNode
-
icon
Icon of the step, optional property
string|ReactNode
-
status
To specify the status. It will be automatically set by current of Steps if not configured. Optional values are: wait process finish error
string
wait
title
Title of the step
string|ReactNode
-
subTitle
Subtitle of the step
string|ReactNode
-
disabled
Disable click
boolean
false