Step

<ts-step> vv0.4.0

The ts-step component.

Open in Storybook for interactive demos.

Preview

<ts-step>Content</ts-step>

Property	Attribute	Type	Default	Description
`completed`	`completed`	`boolean`	`false`	Whether this step is completed.
`description`	`description`	`string \| undefined`	—	Optional description text below the label.
`disabled`	`disabled`	`boolean`	`false`	Whether this step is disabled.
`error`	`error`	`boolean`	`false`	Whether this step has an error.
`icon`	`icon`	`string \| undefined`	—	Optional custom icon name.
`label`	`label`	`string \| undefined`	—	The step label text.

Name	Description
`(default)`	Default slot for step content.

Use ::part() to style internal elements:

Part	Description
`connector`	The connector line between steps.
`content`	The step content area.
`description`	The step description.
`indicator`	The step number/icon circle.
`label`	The step label.
`step`	The step wrapper.

ts-step::part(connector) {
  /* your custom styles */
}

<ts-step>Content</ts-step>

import { TsStep } from '@tessera-ui/react';

<TsStep>Content</TsStep>