logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.1
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Steps

A navigation bar that guides users through the steps of a task.
Importimport { Steps } from "antd";
Sourcecomponents/steps
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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.

PropertyDescriptionTypeDefaultVersion
classNameAdditional class to Stepsstring-
currentTo set the current step, counting from 0. You can overwrite this state by using status of Stepnumber0
directionTo specify the direction of the step bar, horizontal or verticalstringhorizontal
initialSet the initial step, counting from 0number0
labelPlacementPlace title and description with horizontal or vertical directionstringhorizontal
percentProgress circle percentage of current step in process status (only works on basic Steps)number-4.5.0
progressDotSteps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be verticalboolean | (iconDot, {index, status, title, description}) => ReactNodefalse
responsiveChange to vertical direction when screen width smaller than 532pxbooleantrue
sizeTo specify the size of the step bar, default and small are currently supportedstringdefault
statusTo specify the status of current step, can be set to one of the following values: wait process finish errorstringprocess
typeType of steps, can be set to one of the following values: default navigation inlinestringdefaultinline: 5.0
onChangeTrigger when Step is changed(current) => void-
itemsStepItem contentStepItem[]4.24.0

type="inline"

PropertyDescriptionTypeDefaultVersion
classNameAdditional class to Stepsstring-
currentTo set the current step, counting from 0. You can overwrite this state by using status of Stepnumber0
initialSet the initial step, counting from 0number0
statusTo specify the status of current step, can be set to one of the following values: wait process finish errorstringprocess
onChangeTrigger when Step is changed(current) => void-
itemsStepItem content. not supported: icon subtitleStepItem[]4.24.0

StepItem

A single step in the step bar.

PropertyDescriptionTypeDefaultVersion
descriptionDescription of the step, optional propertyReactNode-
disabledDisable clickbooleanfalse
iconIcon of the step, optional propertyReactNode-
statusTo specify the status. It will be automatically set by current of Steps if not configured. Optional values are: wait process finish errorstringwait
subTitleSubtitle of the stepReactNode-
titleTitle of the stepReactNode-

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
customIconFontSizeFont size of custom iconnumber24
customIconSizeSize of custom icon containernumber32
customIconTopTop of custom iconnumber0
descriptionMaxWidthMax width of description areanumber140
dotCurrentSizeCurrent size of dotnumber10
dotSizeSize of dotnumber8
iconFontSizeSize of iconnumber14
iconSizeSize of icon containernumber32
iconSizeSMSize of small steps iconnumber24
iconTopTop of iconnumber-0.5
navArrowColorColor of arrow in navstringrgba(0,0,0,0.25)
navContentMaxWidthMax width of nav contentundefined | MaxWidth<string | number>unset
titleLineHeightLine height of titlestring | number32
Global TokenHow to use?
Basic

The most basic step bar.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Mini version

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
With icon

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Switch Step

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Vertical

A simple step bar in the vertical direction.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Vertical mini version

A simple mini version step bar in the vertical direction.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Error status

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Dot Style

Steps with progress dot style.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customized Dot Style

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Clickable

Setting onChange makes Steps clickable.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Navigation Steps

Navigation steps.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Steps with progress

Steps with progress.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Label Placement

Set labelPlacement to vertical.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Inline Steps

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.
Step 1
00:00:05
This is a description.
2
Step 2
00:01:02
This is a description.
3
Step 3
waiting for longlong time
This is a description.
Step 1
2
Step 2
3
Step 3
4
Step 4
finish 1
finish 2
3
current process
4
wait
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.