Steps

The Steps component provides a visual progress indicator to guide users through multi‑step processes. Each step is displayed as a circle (with either a number or an an optional icon) along with an associated label and optional caption. Use the StepStatus enum to define whether a step is completed, current, or upcoming. The component supports both horizontal and vertical orientations and adapts its styling based on the active status.

Horizontal Steps Example

In the example below, a horizontal Steps component is used to display a registration process. The first step is marked as completed, the second is current, and the remaining steps are upcoming. The active steps use the color defined by StatusColor.Primary.

Source

<Steps Orientation="Orientation.Horizontal" 
       ShowLabels="true" 
       AriaLabel="Registration RzProgress" 
       ActiveColor="StatusColor.Primary">
    <Step Label="Create an account" Status="StepStatus.Completed" Caption="Account created" />
    <Step Label="Select a plan" Status="StepStatus.Current" Caption="Plan selection" />
    <Step Label="Checkout" Status="StepStatus.Upcoming" Caption="Review your cart" />
    <Step Label="Get started" Status="StepStatus.Upcoming" Caption="Begin your journey" />
</Steps>

Vertical Steps Example

In this example the Steps component is rendered vertically. Vertical orientation is ideal for processes where space permits a stacked layout. In this case, the steps represent an onboarding process with two completed steps, one current step, and one upcoming step. The active steps use the color defined by StatusColor.Success.

Source

<Steps Orientation="Orientation.Vertical" 
       ShowLabels="true" 
       AriaLabel="Onboarding RzProgress" 
       ActiveColor="StatusColor.Success">
    <Step Label="Sign Up" Status="StepStatus.Completed" Caption="Account created" />
    <Step Label="Verify Email" Status="StepStatus.Completed" Caption="Email verified" />
    <Step Label="Complete Profile" Status="StepStatus.Current" Caption="Profile incomplete" />
    <Step Label="Get Started" Status="StepStatus.Upcoming" Caption="Start exploring" />
</Steps>

Steps Component Parameters

Property	Description	Type	Default
`Orientation`	`Orientation` – Specifies the layout direction of the steps. Options are `Orientation.Horizontal` or `Orientation.Vertical`.	`Orientation`	`Orientation.Horizontal`
`ShowLabels`	`bool` – Determines whether step labels are rendered.	`bool`	`true`
`AriaLabel`	`string?` – Provides an accessible label for the steps container.	`string?`	`null`
`ActiveColor`	`StatusColor` – Determines the color used for completed and current steps. Options: `StatusColor.Primary`, `StatusColor.Secondary`, `StatusColor.Success`, `StatusColor.Info`, `StatusColor.Warning`, or `StatusColor.Destructive`.	`StatusColor`	`StatusColor.Primary`

Step Component Parameters

Property	Description	Type	Default
`Label`	`string` – The main label for the step.	`string`	Required
`Status`	`StepStatus` – Indicates the step’s current status. Options are `StepStatus.Completed`, `StepStatus.Current`, and `StepStatus.Upcoming`.	`StepStatus`	Required
`Caption`	`string?` – Optional supplementary text that provides additional context for the step.	`string?`	`null`
`Icon`	`SvgIcon?` – Optional icon to display in place of the step number.	`SvgIcon?`	`null`
`AriaLabel`	`string?` – Optional ARIA label for the step, providing more context for accessibility. If not provided, the `Label` is typically used by the parent component.	`string?`	`null`