Cephalopod

Stepper

A component for displaying progress through a multi-step process.

Horizontal

Personal InfoName and email
2
AccountUsername and password
3
ReviewVerify your details

Vertical

Personal InfoName and email
2
AccountUsername and password
3
ReviewVerify your details

Dots

Usage

Code Example
import { Stepper } from "cephalopod-design-system"

const steps = [
  { title: "Step 1", description: "Desc 1" },
  { title: "Step 2", description: "Desc 2" },
]

<Stepper steps={steps} currentStep={1} variant="horizontal" />