Stepper
A component that visually represents a sequence of steps in a process, allowing navigation between steps.
Usage
Default
Progress Stepper
const [activeStep, setActiveStep] = useState(0);
const steps = [
{ label: "Start", icon: FaClipboardList },
{ label: "Review", icon: FaFileAlt },
{ label: "Submit", icon: FaCheckCircle },
];
<Stepper
steps={steps}
activeStep={activeStep}
onStepClick={setActiveStep}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | Array<{ label: string; icon?: React.ElementType; completed?: boolean }> | - | Array of step objects to display. Each step includes a label and may include an icon or completed state. |
| activeStep | number | - | Index of the currently active step (0-based). |
| onStepClick | (stepIndex: number) => void | - | Callback fired when a step is clicked. Receives the clicked step index. |
| disableBackNavigation | boolean | false | Prevents navigation to previous steps. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout orientation for steps. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Theme color variant for the stepper. |
| state | "" | "success" | "error" | "warning" | - | Visual state variant for the stepper. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the stepper and step buttons. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow intensity for the stepper container. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for stepper and steps. |
| className | string | - | Additional CSS class names to apply to the stepper root. |
| data-testid | string | "stepper" | Custom test ID for the root element. |