Stepper

A representation of a user’s progress through a series of discrete steps.

Examples

Define custom animations for the stepper, using the animation, animationViewChange props:

Learn more about how to customize the animations in the Custom Animations section.

This component is used in the following Blocks:

This component uses the following default theme:

Learn more about how to customize in the Theme documentation.

Prop	Description	Default
`className`	CSS Classname to applied to the Stepper `string`
`activeStep`	Currently active step `number`	`0`
`theme`	Theme for the Stepper. `StepperTheme`
`variant`	Style of the stepper. Default is dots but it can be numbered too. `"default" \| "numbered"`	`default`
`continuous`	Display link after last step `boolean`
`animated`	@deprecated Use animation configuration instead. Animate items appearance `boolean`
`animation`	Animation configuration for the Stepper. `MotionNodeAnimationOptions`

Prop	Description	Default
`label`	Optional Text of the marker `string`
`className`	CSS Classname to applied to the Step `string`