Stepper, Asgard Docs

Navigation & chrome

Guide a multi-step flow.

A step-by-step progress indicator that visually guides users through a multi-step workflow.

Key features:

Horizontal and vertical orientations
Variants: default, numbered, icon, dotted
Steps with labels, descriptions, error states, and optional markers
Clickable steps via allowStepClick and configurable connector styles

Loading preview…

When to use it

Checkout and payment flows
Onboarding wizards
Multi-page forms
Clickable / navigable step indicators

Properties

Prop	Type	Default	Description
`steps`	`Step[]`	—	Array of step definitions. Each Step has label, and optional description, icon, optional, error, and disabled properties.
`activeStep`	`number`	—	The zero-based index of the currently active step.
`size`	`'small' \| 'normal' \| 'large'`	—	Controls the overall size of the stepper indicators and text.
`semantic`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—	Semantic color theme applied to active and completed steps.
`variant`	`'default' \| 'numbered' \| 'icon' \| 'dotted'`	—	Visual variant controlling how step indicators are rendered. Numbered shows step numbers, icon uses custom icons, and dotted renders minimal dot indicators.
`orientation`	`'horizontal' \| 'vertical'`	—	Layout direction of the stepper. Horizontal displays steps in a row, vertical stacks them.
`connectorStyle`	`'line' \| 'dashed' \| 'none'`	—	Style of the connector lines drawn between steps.
`allowStepClick`	`boolean`	`false`	When true, step indicators become clickable, allowing users to navigate directly to a step.

Notes

Each Step object supports label, description, icon, optional, error, and disabled properties for fine-grained control over individual step appearance.
Setting alternativeLabel places labels below the step icons in horizontal mode, which is useful when labels are long or when a cleaner layout is desired.
Steps with error set to true will display in an error state regardless of whether they are active or completed.

Presets