Steps

Displays progress through a sequence of tasks.

When to use

Use Steps when a process has multiple ordered stages and the user needs progress, status, or navigation feedback.

Examples

Basic

The most basic step bar. Use the variant property to set different styles and size to control the size.

Error status

By using status of Steps, you can specify the state for current step.

Vertical

A simple step bar in the vertical orientation.

Clickable

Setting onChange makes Steps clickable.

Panel Steps

Panel style steps.

With icon

You can use your own custom icons by setting the property icon for items.

Title Placement and Progress

Use titlePlacement to set the label position and display the progress through percent.

Max Count

Use maxCount to limit visible steps. Hidden ranges are collapsed into ellipsis steps.

Dot Style

Steps with progress dot style.

Navigation Steps

Navigation steps.

Inline Steps

Inline type steps, suitable for displaying the process and current state of the object in the list content scene.

Inline Style Combination

Inline step bar modifies the style and aligns through offset.

Custom semantic dom styling

You can customize the semantic dom style of Steps by passing objects/functions through classNames and styles.

API

Steps and StepProps are exported from @ceebee/ui/client.

Steps

Property	Description	Type	Default	Version
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`current`	To set the current step, counting from 0. You can overwrite this state by using status of Step	`number`	`0`	—
`direction`	To specify the direction of the step bar, horizontal or vertical	`string`	`horizontal`	—
`iconRender`	Custom render icon, please use items.icon first	`(oriNode, info: { index, active, item }) => ReactNode`	`-`	—
`initial`	Set the initial step, counting from 0	`number`	`0`	—
`labelPlacement`	Place title and content with horizontal or vertical direction	`string`	`horizontal`	—
`maxCount`	Maximum number of step items to display (>= 3). Hidden ranges are collapsed into disabled ellipsis steps.	`number`	`-`	—
`orientation`	To specify the orientation of the step bar, horizontal or vertical	`string`	`horizontal`	—
`percent`	Progress circle percentage of current step in process status (only works on basic Steps)	`number`	`-`	4.5.0
`progressDot`	Steps with progress dot style, customize the progress dot by setting it to a function. Please use type="dot" instead. titlePlacement will be vertical	`boolean \| (iconDot, { index, status, title, content }) => ReactNode`	`false`	—
`responsive`	Change to vertical direction when screen width smaller than 532px	`boolean`	`true`	—
`size`	To specify the size of the step bar, medium and small are currently supported	`string`	`medium`	—
`status`	To specify the status of current step, can be set to one of the following values: wait process finish error	`string`	`process`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`titlePlacement`	Place title and content with horizontal or vertical direction	`string`	`horizontal`	—
`type`	Type of steps, can be set to one of the following values: default dot inline navigation panel	`string`	`default`	—
`variant`	Config style variant	`filled \| outlined`	`filled`	—
`onChange`	Trigger when Step is changed	`(current) => void`	`-`	—
`items`	StepItem content	`StepItem`	`[]`	4.24.0

StepItem

Property	Description	Type	Default	Version
`content`	Description of the step, optional property	`ReactNode`	`-`	—
`description`	Description of the step, optional property	`ReactNode`	`-`	—
`disabled`	Disable click	`boolean`	`false`	—
`icon`	Icon of the step, optional property	`ReactNode`	`-`	—
`status`	To specify the status. It will be automatically set by current of Steps if not configured. Optional values are: wait process finish error	`string`	`wait`	—
`subTitle`	Subtitle of the step	`ReactNode`	`-`	—
`title`	Title of the step	`ReactNode`	`-`	—