Skip to content
Navigation

Stepper

Where someone is in a flow with a few known steps.

import { Stepper } from "@flinbu/seed";

Horizontal, go back by clicking

  3. Components12 drafted
  4. Docs (optional) (not started)
import { Button, Stepper } from "@flinbu/seed";

const [step, setStep] = React.useState(2);
const steps = ["Brief", "Tokens", { label: "Components", description: "12 drafted" }, { label: "Docs", optional: true }];

<div className="flex w-full max-w-xl flex-col gap-lg">
  <Stepper steps={steps} current={step} onStepClick={setStep} />
  <div className="flex justify-center gap-xs">
    <Button variant="tertiary" size="sm" disabled={step === 0} onClick={() => setStep(step - 1)}>Back</Button>
    <Button size="sm" disabled={step === steps.length} onClick={() => setStep(step + 1)}>{step >= steps.length - 1 ? "Finish" : "Next"}</Button>
  </div>
</div>

Vertical, small

  1. Connect FigmaAcme UI Library (done)
  2. Map modesLight, Dark
  3. Review import (not started)
import { Stepper } from "@flinbu/seed";

  return <Stepper orientation="vertical" size="sm" current={1} steps={[{ label: "Connect Figma", description: "Acme UI Library" }, { label: "Map modes", description: "Light, Dark" }, { label: "Review import" }]} />;

Use it for

  • Onboarding, imports, setup wizards of 3 to 6 steps.

Use something else for

  • Open-ended processes: use Progress or a Timeline.

Props

PropTypeDefaultDescription
steps(string{ label, description?, optional? })[]–The steps.
currentnumber0Index in progress; earlier ones are done.
orientation'horizontal''vertical''horizontal'Layout.
size'sm''md''md'Dot size.
onStepClick(index: number) => void–Lets finished steps go back.

Accessibility

  • An ordered list; the current step has aria-current=step and each step says done or current.
  • Finished steps become buttons when onStepClick is set.