Stepper
Show the current step in a multi-step process.
Preview
Import
import { Stepper } from "@sigil-ui/components";Usage
<Stepper currentStep={1} steps={[{ label: "Account", description: "Your details" }, { label: "Workspace", description: "Team settings" }, { label: "Review", description: "Confirm and finish" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps (required) | StepperStepConfig[] | — | Steps configuration. |
currentStep (required) | number | — | Current Step configuration. |
orientation | "horizontal" | "vertical" | — | Orientation configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-border | Border |
--s-text-muted | Text muted |
--s-text | Text |
--s-radius-full | Radius full |
--s-duration-fast | Duration fast |
--s-primary-contrast | Primary contrast |
--s-bg | Bg |