Components

Stepper

Option for your step by step user action

Selected Theme

Select brand or tribe name to preview style

Default

Usage

A stepper component to display step by step user action.

import { Stepper } from 'legion-ui';

Basic

Default usage of Stepper with its first step being in Step 1, and has description in its first state.

Step 1Desc

Step 2

Step 3

Step 4

import React from 'react';
import { Button, Stepper } from 'legion-ui';
export default function StepperExample() {
  const [currentStep, setCurrentStep] = React.useState(0);
  const handleNext = () => {
    if (currentStep !== steps.length) {
      setCurrentStep(currentStep + 1);
    }
  };

Props

property	propType	required	default	description
backgroundColor	string	-	-	The background color of each stepper items
borderColor	string	-	-	The border color of each stepper items
currentStep	number	✓	-	Sets in which step is the stepper currently in
orientation	`horizontal` \| `vertical`	-	`horizontal`	Sets the default orientation (top to bottom or left to right) of the stepper
showTextOn	`right` \| `bottom`	✓	`right`	Sets in which direction from the stepper, would the text be rendered
variant	`success` \| `warning` \| `error`	✓	`success`	Sets which variant of stepper would like to be rendered

Steps

property	propType	required	default	description
steps	Array[]	✓	-	Main props should be given to the Stepper component
title	string	✓	-	Sets the title of each stepper items, should be inside label object
description	string	-	-	Sets complementary description of each stepper items, should be inside label object
icon	IconName from react-feather	-	-	Give the stepper item an icon, should be inside steps array.

Do you have feedback?

Please let us know to make it better

Send Feedback