Stepper

This component is used to incrementally increase or decrease in order to show progress.

Basic Usage

import { Stepper } from '@krakentech/coral';
 
<Stepper totalSteps={5} />

Properties

activeStep

<Stepper totalSteps={5} activeStep={3} />

direction

<Stepper totalSteps={4} direction="vertical" />

disableUncompleted

<Stepper totalSteps={5} activeStep={3} disableUncompleted />

Step configs

const stepConfigs: StepConfig = [
    {
        title: 'Usage',
        description: 'Help us understand your current usage',
    },
    {
        title: 'Estimate',
        description: 'Your new tariff',
        disabled: true,
    },
    {
        title: 'About you',
        description: (isCurrentStep: boolean) => (
            <Stack flexDirection="column">
                <Typography color="inherit">
                    We need more information about you.
                </Typography>
                <Button size="small" disabled={!isCurrentStep}>
                    Provide information
                </Button>
            </Stack>
        ),
    },
    {
        title: 'Payment',
        description: 'Please provide your payment information',
        icon: (isComplete: boolean) => (
            <IconChevronDown
                size={33}
                color={isComplete ? 'green' : 'red'}
            />
        ),
    },
    {
        title: 'Overview',
        description: 'A quick final check',
    },
];
 
<Stepper totalSteps={5} activeStep={2} direction="vertical" stepConfigs={stepConfigs} />

StepConfig

Event Handling

<Stepper
    onStepClicked={(step) => {}}
    ...
/>

Responsiveness

The direction of the Stepper will change to horizontal at the lg breakpoint.

<Stepper totalSteps={3} direction={{ base: "vertical", lg: "horizontal" }} />

Full API

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};

Design

Good to know

Choose a stepper to show onboarding progress. Our stepper always starts with the 1st step filled in order to show how easy it is to progress e.g Clicking the ‘get a quote’ button on the homepage would complete the 1st step.

What if I need more than 5 steps?

As a company we pride ourselves on providing simple user experiences unlike many of our competitors. The UK uses 4 steps for their domestic onboarding journey, this consists of:

• Usage
• Tariff
• About me
• Payment

We have a 3 and 5 step option to allow for leeway either side. So we’d suggest if your current journey is exceeding 5 steps have a look and see if there is some clever work that can be done to condense this.

Is the stepper interactive?

Yes! Each step is present or past step is interactive. This can be interacted with via mouse, keyboard and touch.

What if my label is longer than the placeholder copy?

That’s totally fine, our horizontal stepper is responsive to more text - to a point. We cap the character limit at 8, anything after that becomes an ellipsis.

When to use the vertical stepper?

Our horizontal stepper is our most frequently used because it works perfectly for all screen sizes. However there are times when a stepper can be useful at illustrating a timeline of actions the user needs to be aware of. A perfect example of this is within the user dashboard when they are still being onboarded we show a timeline of how long it takes within their dashboard till they are officially a customer.

Component breakdown

Desktop & Dashboard

• Stepper line: 2px
• Stepper line colour: Voltage & Purple Haze
• Complete colour: Voltage
• Current colour: Ink
• Current number: Bold
• Upcoming colour: Purple Haze (20%)
• Upcoming outline: 1px
• Step text: Caption Text
• Label: Body Text 2

Mobile

• Stepper line: 2px
• Stepper line colour: Voltage & Purple Haze
• Complete colour: Voltage
• Current colour: Ink
• Current number: Bold
• Upcoming colour: Purple Haze (20%)
• Upcoming outline: 2px
• Step text: Body Text 2