Basic
Mini version
With icon
Switch Step
Vertical
Vertical mini version
Error status
Dot Style
Customized Dot Style
Clickable
Navigation Steps
Steps with progress
API

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.

In Progress

Left 00:00:08

This is a description.

Waiting

This is a description.

Basic

The most basic step bar.

TypeScript
JavaScript
import { Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <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>
);

export default App;

Finished

In Progress

Waiting

Mini version

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

TypeScript
JavaScript
import { Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <Steps size="small" current={1}>
    <Step title="Finished" />
    <Step title="In Progress" />
    <Step title="Waiting" />
  </Steps>
);

export default App;

Verification

Pay

Done

With icon

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

TypeScript
JavaScript
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from 'infra-design-icons';
import { Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <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>
);

export default App;

First

Second

Last

First-content

Switch Step

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

TypeScript
JavaScript
import { Button, message, Steps } from 'infrad';
import React, { useState } from 'react';

const { Step } = Steps;

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

const App: React.FC = () => {
  const [current, setCurrent] = 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>
    </>
  );
};

export default App;
.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.

In Progress

This is a description.

Waiting

This is a description.

Vertical

A simple step bar in the vertical direction.

TypeScript
JavaScript
import { Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <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>
);

export default App;

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Vertical mini version

A simple mini version step bar in the vertical direction.

TypeScript
JavaScript
import { Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <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>
);

export default App;

Finished

This is a description

In Process

This is a description

Waiting

This is a description

Error status

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

TypeScript
JavaScript
import { Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <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>
);

export default App;

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.

Dot Style

Steps with progress dot style.

TypeScript
JavaScript
import { Divider, Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;

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.

Customized Dot Style

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

TypeScript
JavaScript
import type { StepsProps } from 'infrad';
import { Popover, Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

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

const App: React.FC = () => (
  <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>
);

export default App;

Step 1

This is a description.

Step 2

This is a description.

Step 3

This is a description.

Step 1

This is a description.

Step 2

This is a description.

Step 3

This is a description.

Clickable

Setting onChange makes Steps clickable.

TypeScript
JavaScript
import { Divider, Steps } from 'infrad';
import React, { useState } from 'react';

const { Step } = Steps;

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

  const onChange = (value: number) => {
    console.log('onChange:', current);
    setCurrent(value);
  };

  return (
    <>
      <Steps current={current} onChange={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={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>
    </>
  );
};

export default App;

Navigation Steps

Navigation steps.

TypeScript
JavaScript
import { Steps } from 'infrad';
import React, { useState } from 'react';

const { Step } = Steps;

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

  const onChange = (value: number) => {
    console.log('onChange:', value);
    setCurrent(value);
  };

  return (
    <>
      <Steps
        type="navigation"
        size="small"
        current={current}
        onChange={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={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={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>
    </>
  );
};

export default App;
[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.

In Progress

Left 00:00:08

This is a description.

Waiting

This is a description.

Steps with progress

Steps with progress.

TypeScript
JavaScript
import { Steps } from 'infrad';
import React from 'react';

const { Step } = Steps;

const App: React.FC = () => (
  <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>
);

export default App;

API#

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

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`	string	`default`
onChange	Trigger when Step is changed	(current) => void	-

Steps.Step#

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	-