Step

Step defines an individual step within a Stepper component. It provides the step header (label, description, icon) and the content shown when the step is active.

Behaviors

This component supports the following behaviors:

Behavior	Properties
Animation	`animation`, `animationOptions`
Bookmark	`bookmark`, `bookmarkLevel`, `bookmarkTitle`, `bookmarkOmitFromToc`
Tooltip	`tooltip`, `tooltipMarkdown`, `tooltipOptions`
Styling Variant	`variant`

Properties

`description`

Optional secondary text shown under the step label.

`icon`

Optional icon name to display in the step indicator instead of the step number.

`label`

This property sets the label of the component. If not set, the component will not display a label.

Events

`activated`

Fires whenever this step becomes the active step.

Signature: activated(): void

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-icon-Stepper	none	none
backgroundColor-icon-Stepper--active	none	none
backgroundColor-icon-Stepper--completed	none	none
backgroundColor-icon-Stepper--error	none	none
backgroundColor-Stepper	none	none
borderColor-connector-Stepper	none	none
borderColor-connector-Stepper--completed	none	none
borderStyle-connector-Stepper	none	none
borderWidth-connector-Stepper	none	none
fontSize-description-Stepper	none	none
fontSize-icon-Stepper	none	none
fontSize-label-Stepper	none	none
fontWeight-icon-Stepper	none	none
fontWeight-label-Stepper	none	none
gap-Stepper	none	none
padding-content-Stepper	none	none
padding-Stepper	none	none
size-icon-Stepper	none	none
textColor-description-Stepper	none	none
textColor-icon-Stepper	none	none
textColor-icon-Stepper--active	none	none
textColor-icon-Stepper--completed	none	none
textColor-icon-Stepper--error	none	none
textColor-label-Stepper	none	none
textColor-label-Stepper--active	none	none
textColor-label-Stepper--completed	none	none
textColor-label-Stepper--error	none	none