Steps

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

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

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

The most basic step bar.

expand codeexpand code
import { Steps } from 'antd';

const { Step } = Steps;

ReactDOM.render(
  <Steps current={1}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>,
  mountNode,
);
Finished
2
In Progress
3
Waiting

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

expand codeexpand code
import { Steps } from 'antd';

const { Step } = Steps;

ReactDOM.render(
  <Steps size="small" current={1}>
    <Step title="Finished" />
    <Step title="In Progress" />
    <Step title="Waiting" />
  </Steps>,
  mountNode,
);
Login
Verification
Pay
Done

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

expand codeexpand code
import { Steps } from 'antd';
import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';

const { Step } = Steps;

ReactDOM.render(
  <Steps>
    <Step status="finish" title="Login" icon={<UserOutlined />} />
    <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
    <Step status="process" title="Pay" icon={<LoadingOutlined />} />
    <Step status="wait" title="Done" icon={<SmileOutlined />} />
  </Steps>,
  mountNode,
);
1
First
2
Second
3
Last
First-content

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

expand codeexpand code
import { Steps, Button, message } from 'antd';

const { Step } = Steps;

const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];

const App = () => {
  const [current, setCurrent] = React.useState(0);

  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  return (
    <>
      <Steps current={current}>
        {steps.map(item => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div className="steps-content">{steps[current].content}</div>
      <div className="steps-action">
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => next()}>
            Next
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button type="primary" onClick={() => message.success('Processing complete!')}>
            Done
          </Button>
        )}
        {current > 0 && (
          <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
            Previous
          </Button>
        )}
      </div>
    </>
  );
};

ReactDOM.render(<App />, mountNode);
.steps-content {
  min-height: 200px;
  margin-top: 16px;
  padding-top: 80px;
  text-align: center;
  background-color: #fafafa;
  border: 1px dashed #e9e9e9;
  border-radius: 2px;
}

.steps-action {
  margin-top: 24px;
}
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

A simple step bar in the vertical direction.

expand codeexpand code
import { Steps } from 'antd';

const { Step } = Steps;

ReactDOM.render(
  <Steps direction="vertical" current={1}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>,
  mountNode,
);
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

A simple mini version step bar in the vertical direction.

expand codeexpand code
import { Steps } from 'antd';

const { Step } = Steps;

ReactDOM.render(
  <Steps direction="vertical" size="small" current={1}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>,
  mountNode,
);
Finished
This is a description
In Process
This is a description
3
Waiting
This is a description

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

expand codeexpand code
import { Steps } from 'antd';

const { Step } = Steps;

ReactDOM.render(
  <Steps current={1} status="error">
    <Step title="Finished" description="This is a description" />
    <Step title="In Process" description="This is a description" />
    <Step title="Waiting" description="This is a description" />
  </Steps>,
  mountNode,
);
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.

Steps with progress dot style.

expand codeexpand code
import { Steps, Divider } from 'antd';

const { Step } = Steps;

ReactDOM.render(
  <>
    <Steps progressDot current={1}>
      <Step title="Finished" description="This is a description." />
      <Step title="In Progress" description="This is a description." />
      <Step title="Waiting" description="This is a description." />
    </Steps>
    <Divider />
    <Steps progressDot current={1} direction="vertical">
      <Step title="Finished" description="This is a description. This is a description." />
      <Step title="Finished" description="This is a description. This is a description." />
      <Step title="In Progress" description="This is a description. This is a description." />
      <Step title="Waiting" description="This is a description." />
      <Step title="Waiting" description="This is a description." />
    </Steps>
  </>,
  mountNode,
);
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.

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

expand codeexpand code
import { Steps, Popover } from 'antd';

const { Step } = Steps;

const customDot = (dot, { status, index }) => (
  <Popover
    content={
      <span>
        step {index} status: {status}
      </span>
    }
  >
    {dot}
  </Popover>
);

ReactDOM.render(
  <Steps current={1} progressDot={customDot}>
    <Step title="Finished" description="You can hover on the dot." />
    <Step title="In Progress" description="You can hover on the dot." />
    <Step title="Waiting" description="You can hover on the dot." />
    <Step title="Waiting" description="You can hover on the dot." />
  </Steps>,
  mountNode,
);
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.

Setting onChange makes Steps clickable.

expand codeexpand code
import { Steps, Divider } from 'antd';

const { Step } = Steps;

class Demo extends React.Component {
  state = {
    current: 0,
  };

  onChange = current => {
    console.log('onChange:', current);
    this.setState({ current });
  };

  render() {
    const { current } = this.state;

    return (
      <>
        <Steps current={current} onChange={this.onChange}>
          <Step title="Step 1" description="This is a description." />
          <Step title="Step 2" description="This is a description." />
          <Step title="Step 3" description="This is a description." />
        </Steps>

        <Divider />

        <Steps current={current} onChange={this.onChange} direction="vertical">
          <Step title="Step 1" description="This is a description." />
          <Step title="Step 2" description="This is a description." />
          <Step title="Step 3" description="This is a description." />
        </Steps>
      </>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

Navigation steps.

expand codeexpand code
import { Steps } from 'antd';

const { Step } = Steps;

class Demo extends React.Component {
  state = {
    current: 0,
  };

  onChange = current => {
    console.log('onChange:', current);
    this.setState({ current });
  };

  render() {
    const { current } = this.state;
    return (
      <>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step
            title="Step 1"
            subTitle="00:00:05"
            status="finish"
            description="This is a description."
          />
          <Step
            title="Step 2"
            subTitle="00:01:02"
            status="process"
            description="This is a description."
          />
          <Step
            title="Step 3"
            subTitle="waiting for longlong time"
            status="wait"
            description="This is a description."
          />
        </Steps>
        <Steps
          type="navigation"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step status="finish" title="Step 1" />
          <Step status="process" title="Step 2" />
          <Step status="wait" title="Step 3" />
          <Step status="wait" title="Step 4" />
        </Steps>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step status="finish" title="finish 1" />
          <Step status="finish" title="finish 2" />
          <Step status="process" title="current process" />
          <Step status="wait" title="wait" disabled />
        </Steps>
      </>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
[data-theme='compact'] .site-navigation-steps,
.site-navigation-steps {
  margin-bottom: 60px;
  box-shadow: 0px -1px 0 0 #e8e8e8 inset;
}
Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.

Steps with progress.

expand codeexpand code
import { Steps } from 'antd';

const { Step } = Steps;

ReactDOM.render(
  <Steps current={1} percent={60}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>,
  mountNode,
);

API#

<Steps>
  <Step title="first step" />
  <Step title="second step" />
  <Step title="third step" />
</Steps>

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, navigationstringdefault
onChangeTrigger when Step is changed(current) => void-

Steps.Step#

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-