skip to the main content

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 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 Progress" 
       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 Progress" 
       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

PropertyDescription
OrientationOrientation – Specifies the layout direction of the steps. Options are Orientation.Horizontal or Orientation.Vertical. (Default: Horizontal)
ShowLabelsbool – Determines whether step labels are rendered. (Default: false)
AriaLabelstring – Provides an accessible label for the steps container.
ActiveColorStatusColor – Determines the color used for completed and current steps. Options: StatusColor.Primary, StatusColor.Secondary, StatusColor.Success, StatusColor.Info, StatusColor.Warning, or StatusColor.Danger.

Step Component Parameters

PropertyDescription
Labelstring – The main label for the step. (Required)
StatusStepStatus – Indicates the step’s current status. Options are StepStatus.Completed, StepStatus.Current, and StepStatus.Upcoming. (Required)
Captionstring – Optional supplementary text that provides additional context for the step.