Steps
Steps component display progress & tasks through a sequence order.
Basic
The default usage of Steps component.
Title
Example Steps with title.
Login
Order Placed
In Review
Approved
Vertical
Steps display in horizontal by default, but it be vertical using
vertical props.Login
Order Placed
In Review
Approved
Description
Steps can have description, but it only available for vertical layout.
LoginLogin to your account
Place OrderStart placing an order
In ReviewWe will review the order
ApprovedOrder approved
Custom Icon
Steps label can be replaced by icons.
Login
Order Placed
In Review
Approved
Error
Set the 'error' to
status prop to indicate that step is in error state.Login
Order Placed
In Review
Approved
Controlled steps
We can make Steps dynamic by controlling the
current prop.Login
Order Placed
In Review
Approved
Step 1 content
Clickable
Setting
onChange to make Steps clickable.Login
Order Placed
In Review
Approved
API
Steps
| Prop | Description | Type | Default |
|---|---|---|---|
| current | The current step, counting from 0 | number | 0 |
| onChange | Callback when Steps is changed | (index: number) => void | - |
| status | Status of current step | 'complete' | 'pending' | 'in-progress' | 'error' | 'in-progress' |
| vertical | Whether to display Steps in vertical | boolean | false |
Steps.Item
| Prop | Description | Type | Default |
|---|---|---|---|
| customIcon | Custom element for Step label | ReactNode | string | - |
| description | Step description, only available when Step is vertical | ReactNode | string | - |
| title | Step title | ReactNode | string | - |