WizardStepRail
SourceThe step rail and exit link for wizards.
Overview
The wizard shell chrome. Labels over underline bars, and an exit link above the rail.
The navigation rule lives in the rail, not in callers. Only a strictly earlier step renders as a link. Forward movement always comes from the step page and its gated continue action, so callers hand over an href per step and the rail decides whether it is reachable.
Colour stays reserved for chain verdicts. Progress is a foreground bar at three strengths, not a status.
States
The same three steps with the first, second, and third active. A complete step links back and its bar brightens on hover.
import { WizardStepRail } from "@clear-labs/lens/next/wizard-step-rail";
const steps = [
{ title: "Feed", href: "/ez/strategies/new" },
{ title: "Vault", href: "/ez/strategies/new/vault" },
{ title: "Position", href: "/ez/strategies/new/borrow" },
];
<WizardStepRail
steps={steps}
activeIndex={1}
ariaLabel="wizard steps"
testIdPrefix="wiz-rail"
/>Exit link
Exit, not a step. It leaves the flow entirely, so it sits outside the rail and must not look like one of its steps.
import { WizardExitLink } from "@clear-labs/lens/next/wizard-step-rail";
<WizardExitLink
href="/ez/strategies"
label="Strategies"
testId="wiz-back-to-strategies"
/>In a wizard layout
The exit link above the rail, left against the column, then the step content below.
<WizardExitLink href="/ez/strategies" label="Strategies" testId="wiz-back" />
<WizardStepRail steps={steps} activeIndex={1} ariaLabel="wizard steps" testIdPrefix="wiz-rail" />
{children}WizardStepRail props
One entry per step: a title and the href the rail links back to.
The current step. Steps before it are complete and link, it and the rest do not.
The name of the nav landmark.
The nav's data-testid. Steps render as prefix-step-N, and a linked step adds prefix-step-N-link.