Vertical Stepper

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/vertical-stepper
`

$3

`shell
yarn add @leafygreen-ui/vertical-stepper
`

$3

`shell
npm install @leafygreen-ui/vertical-stepper
`

Example

`tsx
import Button, { Size, Variant } from @leafygreen-ui/button;
import { VerticalStepper, VerticalStep } from @leafygreen-ui/vertical-stepper;

const [currentStep, setCurrentStep] = useState(0);


title="first step"
description={
<>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
efficitur nunc mattis magna pretium, id mattis metus vestibulum. Integer
cursus ex ante, ut molestie lorem vestibulum id.{' '}
Im a link

}
actions={
onClick={() => setCurrentStep(step => step + 1)}
size={Size.Small}
>
primary button

}
/>
title="second step"
description="In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
actions={
<>
onClick={() => setCurrentStep(step => step - 1)}
size={Size.Small}
>
secondary button

onClick={() => setCurrentStep(step => step + 1)}
size={Size.Small}
variant={Variant.Primary}
>
primary button


}
media={}
/>
title="third step"
description="In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis."
actions={
<>
onClick={() => setCurrentStep(step => step - 1)}
size={Size.Small}
>
secondary button

onClick={() => setCurrentStep(step => step + 1)}
size={Size.Small}
variant={Variant.Primary}
>
primary button


}
media={}
/>
;
`

Properties

$3

| Prop | Type | Description | Default |
| ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| darkMode | boolean | Determines if the component renders in dark mode | false |
| currentStep | number | Zero-based. The index of the current step that will appear active. All steps will be marked as completed if the currentStep equals the number of steps. | 0 |
| children | string | Two or more components | |

$3

| Prop | Type | Description | Default |
| ----------- | ----------------- | --------------------------------------------------------------- | ------- |
| title | string | The title of the step. | |
| description | React.ReactNode | The description of the step. This will render below the title. | |
| media | React.ReactNode | The image to the right of the text. E.g. or | |
| actions | React.ReactNode` | Optional buttons that will render below the text. | |