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:

Properties

completed

default: false

When true, the step header is rendered in the completed state (a checkmark glyph and the completed color). Ignored when error is also true.

description

Optional secondary text shown under the step label.

error

default: false

When true, the step header is rendered in the error state (red icon and label, with an ! glyph in place of the step number).

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