Steps

Storybook

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

Import

import { Steps } from 'rsuite';

Examples

Basic

2
3
4

Title

Finished
2
In progress
3
Waiting
4
Waiting

Description

Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
4
Waiting
This is a description.

Vertical

Finished
2
In progress
3
Waiting
4
Waiting
Finished
Description
2
In Progress
Description
3
Waiting
Description
4
Waiting
Description

Error Status

Finished
In progress
3
Waiting
4
Waiting

Small

Finished
2
In progress
3
Waiting
4
Waiting

Custom Icon

Finished
In Progress
Waiting
Waiting

Dynamic

1
Finished
Description
2
In Progress
Description
3
Waiting
Description
4
Waiting
Description

Step: 1


Props

<Steps>

Property Type (Default) Description
classPrefix string ('steps') The prefix of the component CSS class
current number(0) Current execution steps
currentStatus 'finish' | 'wait' | 'process' | 'error' ('process') Current Execution Step Status
small boolean Small size Step Bar
vertical boolean Vertical display

<Steps.Item>

Property Type (Default) Description
classPrefix string ('steps-item') The prefix of the component CSS class
description ReactNode The description of Steps item
icon Element<typeof Icon> , Set icon
status 'finish' | 'wait' | 'process' | 'error' Step status
title ReactNode The title of Steps item
Vercel banner