Stepper

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/stepper

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>

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 | |