# Steps
> Generated from steps.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `current` | number | `0` | Zero-based index of the active step |
| `items` | { title, description?, icon? }[] | `[]` | The ordered stages |
| `direction` | horizontal | vertical | `horizontal` | Layout axis |
| `size` | default | small | `default` | Step scale |
| `progressDot` | boolean | `false` | Render a compact dot rail instead of numbered icons |
| `status` | wait | process | finish | error | `process` | State of the current step — error paints it red |
| `onChange` | (current) => void | `—` | Fires when a step is clicked (if navigable) |

## Visual standard (measured)
- Icon: 32px circle · brand #6A1EBB for current/finished
- Current: filled brand icon + brand title
- Finished: brand ring + check
- Waiting: muted ring + grey title
- Layout: horizontal (default) or direction=vertical
- Size: default (32 icon) or size=small (24 icon)
- Style: numbered icon (default) or progressDot for a compact dot rail
- Error: status=error paints the current step red (colorError)

## When to use
- **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

Keep titles to a short noun phrase per stage. Reserve Steps for genuinely ordered flows — if the sections have no order, use Tabs. Show a description only when the title alone is ambiguous.