Individual step within a Stepper. Renders a progress-bar segment, an indicator, and a label with optional description. Progress (completed/active/not-started) is derived from the parent Stepper's activeStep and this step's step index.
A single Step, with every part it can render: the indicator, the label with its optional marker and trailing endContent, and the description beneath. A Step never sets its own completed/current state. It declares its index and derives the rest from the parent Stepper, so one Step in one Stepper is a complete example.
Preview loads on approachPreview loads on approach
Exact source · step-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Stepper, Step} from '@astryxdesign/core/Stepper';
import {Text} from '@astryxdesign/core/Text';
export default function StepShowcase() {
// One Step, and every part it renders: the indicator, the label with its
// optional marker and trailing slot, and the description beneath. A Step is
// always wrapped in a Stepper — that is where it reads its progress from —
// so a single Step in a single Stepper is the smallest complete example.
return (
<div style={{width: 380}}>
<Stepper activeStep={1} orientation="vertical">
<Step
step={1}
label="Connect a repository"
description="Astryx reads your build settings from the default branch"
endContent={<Text type="supporting">2 min</Text>}
isOptional
/>
</Stepper>
</div>
);
}
Usage
Individual step within a Stepper. Renders a progress-bar segment, an indicator, and a label with optional description. Progress (completed/active/not-started) is derived from the parent Stepper's activeStep and this step's step index.
Typed props
Prop
Type and behavior
step
number · required
Zero-based index of this step. Used to derive progress (completed/active/not-started) relative to the parent activeStep.
label
string · required
Step label text. Kept to a single line and ellipsized when the step is narrower than the label, so a row of horizontal steps stays the same height and the track under them stays straight. The full string is still read out as part of the step, so a truncated label costs nothing in the accessible name — but short labels survive narrow layouts better.
description
string
Optional description shown below the label for additional context.
children
ReactNode
Content rendered below the label and description. Useful in vertical steppers for form fields or detailed step content. In a compact horizontal Stepper, the content remains mounted to preserve local state while it is hidden with the expanded step details.
status
'accent' | 'success' | 'warning' | 'error'
Semantic color for the step. Controls color only and maps to the global Astryx semantic tokens. Leave unset for the progress-derived default coloring.
What to show as the step indicator. 'auto' shows a number until completed then a check, 'number' always shows a numbered badge, 'none' hides it, or pass any ReactNode (e.g. an Icon) for a fully custom indicator.
