The Step Separator is the connecting line between step markers inside a Stepper V2 step track. It reads the step's status from its Source and colors itself accordingly — one color once the step is completed, another while it is pending. It isn't a standalone divider: it only appears in the block picker when you insert a block inside a Stepper V2.
Overview
When you build a custom step track in a Stepper V2, place a Step Separator between step indicators. It follows the stepper's orientation automatically — it stretches horizontally between markers in a horizontal stepper and vertically in a vertical one. After the last step, it draws nothing, so the track never ends with a dangling line.
Note: For a labelled section divider on a regular page, use a Divider (see Scrollable & Divider) with a Typography heading. For a ready-made step track with built-in connectors, use the classic Stepper block (see Timeline, Events Timeline & Stepper).
Properties
Content Properties
Property | Default | Description |
|---|---|---|
Source | Bound to the stepper's current step | An expression that resolves to a step context object. The separator uses its status, and whether it is the last step, to pick a color and decide whether to draw. When you drop the block inside a Stepper V2, Source is bound for you. If you clear it later, rebind it by hand to the stepper's current step. |
Appearance Properties
Property | Default | Description |
|---|---|---|
Completed color | Brand | Line color once the step before the separator is completed. |
Pending color | Secondary gray | Line color for every other state, including the active step. |
Visibility | — | Show or hide the separator based on a condition. |
Styles | 1px solid border | Width, height, padding, margin, border width and border style. The visible line is drawn by the border — set the border width to none and the line disappears, but the space remains. |
The Step Separator has no events and no methods.
Note: When you add a Step Separator inside a Stepper V2, the builder also fills its HTML Attributes with data-orientation and data-step-status, bound to the stepper. Leave them as they are: they let the line follow the stepper's orientation and step status. Without data-orientation, the line renders horizontal even in a vertical stepper.
Example: Progress-Style Step Track
Add a Stepper V2 to your page. In the page hierarchy, expand it and open its stepTrack, the step track that holds the step indicators and separators.
Select the Step Separator between two step indicators.
Set Completed color to a success green and Pending color to a light gray. The line fills in behind the user as steps are completed.
For a dashed connector, open the Border section, set Border style to dashed and increase Border width. Border style is offered in web apps only.
Tip: There is no orientation setting on the separator. Switch the Stepper V2 between horizontal and vertical, and every separator re-orients itself.
Related Components
Component | Relationship |
|---|---|
The host block. It provides the step context and orientation. | |
Use a Stepped Container to show different content for each step. Link it to a Stepper or Stepper V2, which provides the progress indicator; the Stepped Container has no built-in next/back controls. | |
Use a plain Divider for a horizontal rule on a regular page, with no step semantics. |