Step

One step of a Stepper: a numbered indicator with a label and optional description.

import { Step } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Step } from '@basiiik/ui';

<Step label="Details" />

Example values were filled in for the required prop label: replace them with your own.
status sets the look and the hidden status text; only current gets aria-current="step".
Storybook: Navigation/Stepper.

Props

Prop	Type	Notes
`status`	`"error" \| "complete" \| "upcoming" \| "current"`	Default "upcoming"
`label` required	`ReactNode`
`description`	`ReactNode`
`description`	`ReactNode`

Other props

Prop	Type	What it does
`index`	`number`	The number shown in the indicator (1-based). Complete shows a check and Error an exclamation mark instead.
`connector`	`boolean`	Draw the connector to the next step. Set by `Stepper`.
`statusText`	`string`	Visually hidden status text, for translation.

States. status sets the look and the hidden status text; only current gets aria-current="step".

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

Only inside a Stepper

Do not use it when

Standalone progress display (use Progress)

Rules for agents

Prefer Stepper with steps data; it renders Steps, numbers them and sets status and connectors
Use Step directly only for a custom layout, inside an <ol>, with status and index set
Pass statusText when the interface is not in English

Avoid

A Step outside a Stepper or ordered list
Setting status by hand when Stepper can derive it from current

Writing the content

Labels are short nouns
Use sentence case

Keyboard

Not focusable by default; if a step is a link or button it follows normal Tab order and Enter activates

Accessibility

aria-current="step" on the current step
Status is also available as visually hidden text such as "completed" or "error"

Colour tokens it reads

color.bg.brand.defaultcolor.bg.danger.defaultcolor.bg.surfacecolor.border.inputcolor.icon.primarycolor.text.dangercolor.text.on-brandcolor.text.on-dangercolor.text.primarycolor.text.secondary

navigation 4 Figma variants Try it in the live demo