Ecme - The Ultimate Next & TypeScript Web Template

Steps

Steps component display progress & tasks through a sequence order.

The default usage of Steps component.

Example Steps with title.

Order Placed

In Review

Approved

Steps display in horizontal by default, but it be vertical using vertical props.

Order Placed

In Review

Approved

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

Steps label can be replaced by icons.

Order Placed

In Review

Approved

Set the 'error' to status prop to indicate that step is in error state.

Order Placed

In Review

Approved

We can make Steps dynamic by controlling the current prop.

Order Placed

In Review

Approved

Setting onChange to make Steps clickable.

Order Placed

In Review

Approved

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`

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`	-