Skip to main content

Stepper

Steppers convey progress through numbered steps.

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=23105-92242

Demo

zeta-web v0.11.0
Web Components

ZetaStepper is a container component for displaying a sequence of steps in a process.

To define individual steps, pass zeta-stepper-item elements as children of this component.

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-stepper--docs

Slots

NameDescriptionType
defaultPass as many zeta-stepper-items as needed.text

Attributes

NameDescriptionTypeDefault
variantStepper direction. Defaults to horizontal."vertical" | "horizontal""horizontal"
progressThe current progress of the stepper, represented as a floating point number (0.0-1.0).This number is used by the progress bar.number0
showOverflowButtonSet to true when not all stepper items can be displayed on screen at once.Displays a button that allows users to view additional stepper items.User can set their own functionality to the button.booleanfalse
progressBarSet to true for the progress bar to be shown.booleanfalse