Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Stepper

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

FigmaGitHub

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"]} 
    disabled={true}
  />
  <Stepper 
    variant="accent"
    onClick={() => {}} 
    activeStep={2}
    steps={["Who", "What", "Where"]} 
    disabled={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"]} 
/>

Guidelines

Stepper should be used to show where you are in a process

Code

<Stepper />

import { Stepper } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
variant"core" | "accent"accent has a slightly tinted background
activeStepnumberThe current step
stepsstring[]The label shown for each step
onClick(step: number) => voidCallback for when a step is clicked directly (on larger devices)
onBackButtonClick(isFirstStep: boolean) => voidCallback for when the back button is clicked (on smaller devices)
headingstringHeading that's shown on smaller devices
headingLevel"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"The heading level of the heading that's shown on smaller devices. Defaults to h2.
disabledbooleanDisables all completed steps