## Steps
Show progress through a sequence of ordered stages — wizards, onboarding, checkouts — rendered through the shared Steps.
Tier: composite-antd. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- current: number, default 0. Zero-based index of the active step
- items: { title, description?, icon? }[], default []. The ordered stages
- direction: horizontal | vertical, default horizontal. Layout axis
- size: default | small, default default. Step scale
- progressDot: boolean, default false. Render a compact dot rail instead of numbered icons
- status: wait | process | finish | error, default process. State of the current step — error paints it red
- onChange: (current) => void, default —. Fires when a step is clicked (if navigable)
Tokens: colorPrimary, colorText, Steps.colorPrimary, Steps.iconSize, Steps.iconFontSize, Steps.titleLineHeight.
Use when: Steps (a linear sequence of stages where the user should see where they are and what's left); Tabs (peer views the user switches between freely — no order, no progress); Progress (a single continuous completion metric, not discrete named stages).