Components

Stepper

A Stepper lets you visualize where a user is in a certain flow, and provides certain navigation capabilities.

Examples

A basic stepper

<Stepper 
  variant="base"
  onClick={() => {}} 
  activeStep={1} 
  steps={["Who", "What", "Where"]} 
/>

Different variants

<Stack>
  <Stepper 
    heading="Base version"
    variant="base"
    onClick={() => {}} 
    activeStep={1} 
    steps={["Who", "What", "Where"]} 
  />
  <Stepper
    heading="Accent"
    variant="accent"
    onClick={() => {}} 
    activeStep={1} 
    steps={["Who", "What", "Where"]} 
  />
</Stack>

A controlled stepper

() => {
  const [step, setStep] = React.useState(2);
  return (
     <Stepper
      variant="base" 
      onClick={setStep} 
      activeStep={step} 
      steps={["Who", "What", "Where"]}
    />
  );
}

Disabled steppers

<Stack>
  <Stepper 
    variant="base"
    onClick={() => {}} 
    activeStep={2}
    steps={["Who", "What", "Where"]} 
    isDisabled={true}
  />
  <Stepper 
    variant="accent"
    onClick={() => {}} 
    activeStep={2}
    steps={["Who", "What", "Where"]} 
    isDisabled={true}
  />
</Stack>

A stepper with a heading and custom heading level

<Stepper 
  heading="Choose seat"
  headingLevel="h3"
  variant="accent"
  onClick={() => {}} 
  activeStep={1} 
  steps={["Who", "What", "Where"]} 
/>

A stepper with a custom back button listener

<Stepper 
  heading="Choose seat"
  variant="accent"
  onClick={() => {}} 
  onBackButtonClick={
    (isFirstStep) => {
      alert(
        isFirstStep ? "First step!" : "not first step"
      )
    }
  }
  activeStep={1} 
  steps={["Who", "What", "Where"]} 
/>