Igloo branding

Stepper

The Stepper component provides a visual representation of a multi-step process.

Installation

To install @igloo-ui/stepper in your project, you will need to run the following command using npm:

npm install @igloo-ui/stepper

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/stepper

Usage

Then to use the component in your code just import it!

import Button from '@igloo-ui/button';
import Stepper from '@igloo-ui/stepper';

const [currentStep, setCurrentStep] = React.useState(0);
const exampleSteps = [
  { title: 'Step 1', onClick: (index) => setCurrentStep(index) },
  { title: 'Step 2', onClick: (index) => setCurrentStep(index) },
  { title: 'Step 3', onClick: (index) => setCurrentStep(index) },
];

<Stepper
  currentStep={currentStep}
  style={{ flex: '1 1 auto' }}
  steps={exampleSteps}
/>
<Button
  onClick={() => setCurrentStep((prevCurrentStep) => prevCurrentStep + 1)}
  disabled={currentStep === exampleSteps.length - 1}
>
  Continue
</Button>;

API

Step

PropTypeDescription
disabledbooleanWhether or not the step is disabled
isCompletebooleanWhether or not the step is complete
isCurrentbooleanWhether or not the step is the current step
titlestringThe title for the step

Stepper

PropTypeDescription
classNamestringThe class name for the stepper
clickableNextStepsbooleanIf true, the steps after the current step will be clickable and the user will be able to navigate to any step in the sequence
currentStepnumberThe current step in the sequence
dataTeststringAdd a data-test tag for automated tests
stepsStep[]The steps in the sequence