Components
Stepper
A Stepper lets you visualize where a user is in a certain flow, and provides certain navigation capabilities.
Code examples
<Stepper variant="base" onClick={() => {}} activeStep={1} steps={["Who", "What", "Where"]} />
Guidelines
Stepper should be used to show where you are in a process.
A Stepper should be used when users can navigate between steps and control their progress through a process. It helps users understand where they are and allows them to move back and forth between steps.
A Progress Indicator, on the other hand, should be used when progress is controlled by the system rather than the user. For example, when a payment is being processed or a ticket is being booked, the system determines the progress and the user cannot influence the individual steps.
Code
<Stepper />
import { Stepper } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
variant | "core" | "accent" | accent has a slightly tinted background | |
activeStep | number | The current step | |
steps | string[] | The label shown for each step | |
onClick | (step: number) => void | Callback for when a step is clicked directly (on larger devices) | |
onBackButtonClick | (isFirstStep: boolean) => void | Callback for when the back button is clicked (on smaller devices) | |
heading | string | Heading 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. | |
disabled | boolean | Disables all completed steps |