Skip to content

Stepper

A checkout in three acts: done steps link back, the current step is marked, the future waits its turn.

Example

  1. CartReview items
  2. ShippingWhere it goes
  3. PaymentHow you pay
  4. DoneReceipt
<Stepper
  current={2}
  steps={[
    { label: "Cart", href: "/components" },
    ...
  }}
/>

Props

PropTypeDefaultDescription
stepsArray-Label + optional href + description.
currentnumber-0-based index of the current step.

Accessibility