Ant Design

⌘ K

6.0.0-alpha.1

Steps

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

Importimport { Steps } from "antd";

Sourcecomponents/steps

Docs

Edit this page Changelog

contributors

Pagination Tabs

Ant Design

⌘ K

6.0.0-alpha.1

Steps

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

Importimport { Steps } from "antd";

Sourcecomponents/steps

Docs

Edit this page Changelog

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
classNames	Semantic DOM class	Record<SemanticDOM, 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`
iconRender	Custom render icon, please use `items.icon` first	(oriNode, info: { index, active, item }) => ReactNode	-
initial	Set the initial step, counting from 0	number	0
~~labelPlacement~~	Place title and content with `horizontal` or `vertical` direction	string	`horizontal`
orientation	To specify the orientation of the step bar, `horizontal` or `vertical`	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. `titlePlacement` will be `vertical`	boolean \| (iconDot, { index, status, title, content }) => 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`
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-
titlePlacement	Place title and content with `horizontal` or `vertical` direction	string	`horizontal`
type	Type of steps, can be set to one of the following values: `default` `dot` `inline` `navigation` `panel`	string	`default`
variant	Config style variant	`filled` \| `outlined`	`filled`
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content	StepItem	[]	4.24.0

StepItem

A single step in the step bar.

Property	Description	Type	Default
content	Description of the step, optional property	ReactNode	-
~~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	-

Semantic DOM

Steps

StepItem

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
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	undefined \| MaxWidth<string \| number>	unset

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. Use the variant property to set different styles and size to control the size.

Error status

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

Vertical

A simple step bar in the vertical orientation.

Clickable

Setting onChange makes Steps clickable.

Panel Steps

Panel style steps.

With icon

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

Title Placement and Progress

Use titlePlacement to set the label position and display the progress through percent.

Dot Style

Steps with progress dot style.

Navigation Steps

Navigation steps.

Inline Steps

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

Inline Style Combination

Inline step bar modifies the style and aligns through offset.

API

Common props ref：Common props

Steps

The whole of the step bar.

Property	Description	Type	Default	Version
classNames	Semantic DOM class	Record<SemanticDOM, 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`
iconRender	Custom render icon, please use `items.icon` first	(oriNode, info: { index, active, item }) => ReactNode	-
initial	Set the initial step, counting from 0	number	0
~~labelPlacement~~	Place title and content with `horizontal` or `vertical` direction	string	`horizontal`
orientation	To specify the orientation of the step bar, `horizontal` or `vertical`	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. `titlePlacement` will be `vertical`	boolean \| (iconDot, { index, status, title, content }) => 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`
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-
titlePlacement	Place title and content with `horizontal` or `vertical` direction	string	`horizontal`
type	Type of steps, can be set to one of the following values: `default` `dot` `inline` `navigation` `panel`	string	`default`
variant	Config style variant	`filled` \| `outlined`	`filled`
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content	StepItem	[]	4.24.0

StepItem

A single step in the step bar.

Property	Description	Type	Default
content	Description of the step, optional property	ReactNode	-
~~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	-

Semantic DOM

Steps

StepItem

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
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	undefined \| MaxWidth<string \| number>	unset

Global TokenHow to use?

Basic

The most basic step bar. Use the variant property to set different styles and size to control the size.

Error status

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

Vertical

A simple step bar in the vertical orientation.

Clickable

Setting onChange makes Steps clickable.

Panel Steps

Panel style steps.

With icon

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

Title Placement and Progress

Use titlePlacement to set the label position and display the progress through percent.

Dot Style

Steps with progress dot style.

Navigation Steps

Navigation steps.

Inline Steps

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

Inline Style Combination

Inline step bar modifies the style and aligns through offset.

Finished

This is a content.

2

In Progress

Left 00:00:08

This is a content.

3

Waiting

This is a content.

Finished

This is a content.

2

In Progress

Left 00:00:08

This is a content.

3

Waiting

This is a content.

Finished

This is a content.

2

In Progress

Left 00:00:08

This is a content.

3

Waiting

This is a content.

Finished

This is a content.

2

In Progress

Left 00:00:08

This is a content.

3

Waiting

This is a content.

Finished

This is a content

In Process

This is a content

3

Waiting

This is a content

Finished

This is a content.

2

In Progress

This is a content.

3

Waiting

This is a content.

Finished

This is a content.

2

In Progress

This is a content.

3

Waiting

This is a content.

1

Step 1

This is a content.

2

Step 2

This is a content.

3

Step 3

This is a content.

1

Step 1

This is a content.

2

Step 2

This is a content.

3

Step 3

This is a content.

1

Step 1

00:00

This is a content.

Step 2

This is a content.

3

Step 3

This is a content.

1

Step 1

00:00

This is a content.

Step 2

This is a content.

3

Step 3

This is a content.

Login

Verification

Pay

Done

Finished

This is a content.

2

In Progress

This is a content.

3

Waiting

This is a content.

Finished

This is a content.

2

In Progress

This is a content.

3

Waiting

This is a content.

Finished

This is a content.

2

In Progress

This is a content.

3

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

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

Step 1

Sub Title

This is Step 1

Step 2

Sub Title

This is Step 2

Step 3

Sub Title

This is Step 3

Step 4

Sub Title

This is Step 4

Step 5

Sub Title

This is Step 5

Step 1

Sub Title

This is Step 1

Step 2

Sub Title

This is Step 2

Step 3

Sub Title

This is Step 3

Step 4

Sub Title

This is Step 4

Step 5

Sub Title

This is Step 5

Step 3

Sub Title

This is Step 3

Step 4

Sub Title

This is Step 4

Step 5

Sub Title

This is Step 5

Step 1