Steps

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

Import

import { Steps } from 'rsuite';

// or
import Steps from 'rsuite/Steps';

Examples

Default

Title

Description

Vertical

Error Status

Small

Custom Icon

Dynamic

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