Skip to content

Latest commit

 

History

History

stepper

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Stepper

npm (scoped)

Installation

Yarn

yarn add @leafygreen-ui/stepper

NPM

npm install @leafygreen-ui/stepper

Example

<Stepper currentStep={0} maxDisplayedSteps={2}>
  <div>Step 1</div>
  <div>Step 2</div>
</Stepper>

or

<Stepper currentStep={0} maxDisplayedSteps={2}>
  <Step>Step 1</Step>
  <Step>Step 2</Step>
</Stepper>

Output HTML

<ol class="leafygreen-ui-1pvgjhr" aria-label="progress">
  <li>
    <div class="leafygreen-ui-1x8f1m7" aria-label="step1" aria-current="step">
      <div class="lg-ui-03f12bfd leafygreen-ui-1dyv85w">
        <div class="leafygreen-ui-17xqetg">1</div>
      </div>
      <p class="lg-ui-d036aa4e leafygreen-ui-1u866nc">Step 1</p>
    </div>
  </li>
  <li>
    <div class="leafygreen-ui-1x8f1m7" aria-label="step2" aria-current="false">
      <div class="lg-ui-03f12bfd leafygreen-ui-1oypnhq">
        <div class="leafygreen-ui-17xqetg">2</div>
      </div>
      <p class="lg-ui-d036aa4e leafygreen-ui-1uk291k">Step 2</p>
    </div>
  </li>
</ol>

Properties

Prop Type Description Default
children React.ReactNode ReactNode to display as the children of each step
currentStep number Starting at 0, index of current step that should be highlighted.
maxDisplayedSteps number Maximum number of steps displayed a time. The rest are hidden. children.length
completedStepsShown number Number of completed steps shown before the currentStep. The ellipses step is included in this count. 1
className string className applied to the root element