Ant Design

⌘ K

5.27.6

Steps

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

Importimport { Steps } from "antd";

GitHub

components/steps Issue Open issues

Docs

Edit this page

contributors

Pagination Tabs

Ant Design

⌘ K

5.27.6

Steps

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

Importimport { Steps } from "antd";

GitHub

components/steps Issue Open issues

Docs

Edit this page

contributors

Pagination Tabs

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.

Examples

API

Common props ref：Common props

Steps

The whole of the step bar.

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
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`
initial	Set the initial step, counting from 0	number	0
labelPlacement	Place title and description with `horizontal` or `vertical` direction	string	`horizontal`
percent	Progress circle percentage of current step in `process` status (only works on basic Steps)	number	-	4.5.0
progressDot	Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical`	boolean \| (iconDot, {index, status, title, description}) => ReactNode	false
responsive	Change to vertical direction when screen width smaller than `532px`	boolean	true
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`
type	Type of steps, can be set to one of the following values: `default` `navigation` `inline`	string	`default`	inline: 5.0
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content	StepItem	[]	4.24.0

`type="inline"`

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
current	To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`	number	0
initial	Set the initial step, counting from 0	number	0
status	To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`	string	`process`
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content. not supported: `icon` `subtitle`	StepItem	[]	4.24.0

StepItem

A single step in the step bar.

Property	Description	Type	Default
description	Description of the step, optional property	ReactNode	-
disabled	Disable click	boolean	false
icon	Icon of the step, optional property	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`
subTitle	Subtitle of the step	ReactNode	-
title	Title of the step	ReactNode	-

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
customIconFontSize	Font size of custom icon	number	24
customIconSize	Size of custom icon container	number	32
customIconTop	Top of custom icon	number	0
descriptionMaxWidth	Max width of description area	number	140
dotCurrentSize	Current size of dot	number	10
dotSize	Size of dot	number	8
iconFontSize	Size of icon	number	14
iconSize	Size of icon container	number	32
iconSizeSM	Size of small steps icon	number	24
iconTop	Top of icon	number	-0.5
navArrowColor	Color of arrow in nav	string	rgba(0,0,0,0.25)
navContentMaxWidth	Max width of nav content	MaxWidth<string \| number> \| undefined	unset
titleLineHeight	Line height of title	string \| number	32

Global TokenHow to use?

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.

Examples

Basic

The most basic step bar.

Mini version

By setting like this: <Steps size="small">, you can get a mini version.

With icon

You can use your own custom icons by setting the property icon for items.

Switch Step

Cooperate with the content and buttons, to represent the progress of a process.

Vertical

A simple step bar in the vertical direction.

Vertical mini version

A simple mini version step bar in the vertical direction.

Error status

By using status of Steps, you can specify the state for current step.

Dot Style

Steps with progress dot style.

Customized Dot Style

You can customize the display for Steps with progress dot style.

Clickable

Setting onChange makes Steps clickable.

Navigation Steps

Navigation steps.

Steps with progress

Steps with progress.

Label Placement

Set labelPlacement to vertical.

Inline Steps

Inline type steps, suitable for displaying the process and current state of the object in the list content scene.

API

Common props ref：Common props

Steps

The whole of the step bar.

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
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`
initial	Set the initial step, counting from 0	number	0
labelPlacement	Place title and description with `horizontal` or `vertical` direction	string	`horizontal`
percent	Progress circle percentage of current step in `process` status (only works on basic Steps)	number	-	4.5.0
progressDot	Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical`	boolean \| (iconDot, {index, status, title, description}) => ReactNode	false
responsive	Change to vertical direction when screen width smaller than `532px`	boolean	true
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`
type	Type of steps, can be set to one of the following values: `default` `navigation` `inline`	string	`default`	inline: 5.0
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content	StepItem	[]	4.24.0

`type="inline"`

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
current	To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`	number	0
initial	Set the initial step, counting from 0	number	0
status	To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`	string	`process`
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content. not supported: `icon` `subtitle`	StepItem	[]	4.24.0

StepItem

A single step in the step bar.

Property	Description	Type	Default
description	Description of the step, optional property	ReactNode	-
disabled	Disable click	boolean	false
icon	Icon of the step, optional property	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`
subTitle	Subtitle of the step	ReactNode	-
title	Title of the step	ReactNode	-

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
customIconFontSize	Font size of custom icon	number	24
customIconSize	Size of custom icon container	number	32
customIconTop	Top of custom icon	number	0
descriptionMaxWidth	Max width of description area	number	140
dotCurrentSize	Current size of dot	number	10
dotSize	Size of dot	number	8
iconFontSize	Size of icon	number	14
iconSize	Size of icon container	number	32
iconSizeSM	Size of small steps icon	number	24
iconTop	Top of icon	number	-0.5
navArrowColor	Color of arrow in nav	string	rgba(0,0,0,0.25)
navContentMaxWidth	Max width of nav content	MaxWidth<string \| number> \| undefined	unset
titleLineHeight	Line height of title	string \| number	32

Global TokenHow to use?

Basic

The most basic step bar.

Mini version

By setting like this: <Steps size="small">, you can get a mini version.

With icon

You can use your own custom icons by setting the property icon for items.

Switch Step

Cooperate with the content and buttons, to represent the progress of a process.

Vertical

A simple step bar in the vertical direction.

Vertical mini version

A simple mini version step bar in the vertical direction.

Error status

By using status of Steps, you can specify the state for current step.

Dot Style

Steps with progress dot style.

Customized Dot Style

You can customize the display for Steps with progress dot style.

Clickable

Setting onChange makes Steps clickable.

Navigation Steps

Navigation steps.

Steps with progress

Steps with progress.

Label Placement

Set labelPlacement to vertical.

Inline Steps

Inline type steps, suitable for displaying the process and current state of the object in the list content scene.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

2

In Progress

3

Waiting

Login

Verification

Pay

Done

1

First

2

Second

3

Last

First-content

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description

In Process

This is a description

3

Waiting

This is a description

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.

Finished

This is a description. This is a description.

In Progress

This is a description. This is a description.

Waiting

This is a description.

Waiting

This is a description.

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.

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.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Ant Design Title 1
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 2
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 3
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 4
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.

Steps

Steps

When To Use

Examples

API

Steps

type="inline"

StepItem

Design Token

When To Use

Examples

API

Steps

type="inline"

StepItem

Design Token

Ant Design Title 1

Ant Design Title 2

Ant Design Title 3

Ant Design Title 4

`type="inline"`

`type="inline"`