Stepper
A status-driven timeline for wizards, deployments, and onboarding flows.
Renders steps with icons, connector lines, and an optional progress bar. Declare steps as <Step slot:steps label=… status=… /> children — each step carries its own StepStatus rather than a single active index.
- Setup wizards, deployment pipelines, and onboarding flows
- Vertical timelines (default) or horizontal wizard headers via
vertical=false - Optional
progressbar (0–100) for long-running operations
Vertical stepper with mixed step statuses and an active-step message. Use for deployment pipelines, setup wizards, and any multi-step workflow timeline.
Every step marked complete with green check icons and solid connectors. Use when a process has finished successfully and you want a clear completion state.
Failed step with a danger icon, error message, and dashed connectors to pending steps. Use when a step fails and you need to surface the failure reason inline.
Horizontal layout with step labels centered under icons, suited to wizard headers. Use at the top of multi-page forms where steps read left to right.
Overall progress bar below the steps, driven by a reactive 0–100 signal. Use for long-running operations where percent complete matters alongside step status.
Realistic seven-step deployment with progress bar and an active upload message. Use as a reference for CI/CD or release pipelines with many sequential phases.