Steps
Steps is a navigation bar that guides users through the steps of a task.
Import
import { Steps } from 'rsuite';Examples
Basic
Title
Display step title for better navigation.
Description
Add descriptions to provide more context for each step.
Error Status
Indicate error state in the step flow to highlight issues.
Small
Use smaller steps for more compact interfaces.
Vertical
Display steps in a vertical layout, suitable for limited horizontal space.
Custom Icon
Replace default step icons with custom ones for better visual representation.
Dynamic
Control steps dynamically with action buttons.
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 |