# Steps

> Where someone is in a short flow of 3 to 5 steps — finished steps in ink, the current step as a yellow sticker, the steps ahead outlined.

Source: https://raft-design.botiverse.build/components/steps. Generated from the current release; where it differs from what you remember, this page is right.

Steps show where someone is in a short flow of 3 to 5 steps, such as setting up a server. Finished steps are ink, the current step is a yellow sticker, and the steps ahead are outlined.

```tsx
import { Step, Steps } from "@botiverse/raft-ui";

export function StepsPreviewContent() {
  return (
    <Steps current={2} className="w-full max-w-2xl">
      <Step title="Create" description="Name and region" />
      <Step title="Configure" description="Pick the machine" />
      <Step title="Share" description="Invite your team" />
      <Step title="Launch" />
    </Steps>
  );
}
```

## When to use

| Situation                                                 | Use                                                                                                                              |
| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| A flow of 3 to 5 steps taken in order                     | Steps                                                                                                                            |
| A flow of more than 5 steps                               | Split it into 2 flows, each with its own Steps                                                                                   |
| How far one operation has got                             | [Progress](https://raft-design.botiverse.build/components/progress.md)                                                                                              |
| Sections people visit in any order                        | [Tabs](https://raft-design.botiverse.build/components/tabs.md)                                                                                                          |
| The step label of a server's setup ("Set up your server") | A line of Space Mono in the dialog's header, not Steps; see [Onboarding](https://raft-design.botiverse.build/products/raft-chat/onboarding.md) |

## Anatomy

- `Steps`: the ordered list. `current` sets the current step, counted from 1.
- `Step`: one step: a 20px square marker with its number in Space Mono, a title, and an optional description. A short `line-seam` connects it to the next step.
- `OtterIndicator`: an illustration with one pose per step status, at 48px or larger. It is exported beside Steps; the system has no rule for it yet.

## Variants

| Variant                                          | Use for                                                                                |
| ------------------------------------------------ | -------------------------------------------------------------------------------------- |
| A row (default)                                  | Most flows                                                                             |
| `vertical`                                       | The steps in a column                                                                  |
| Clickable (`onUpdateCurrent`)                    | A flow where people can return to an earlier step. A `disabled` step can't be selected |
| Custom marks (`icon`, `finishIcon`, `errorIcon`) | An icon in place of a step's number, check or cross                                    |

```tsx
import { Step, Steps } from "@botiverse/raft-ui";

export function StepsVerticalContent() {
  return (
    <Steps current={2} vertical className="w-full max-w-sm">
      <Step title="Add a machine" description="Connect a machine to the workspace" />
      <Step title="Configure the agent" description="Choose a runtime and the tools it can use" />
      <Step title="Start a conversation" description="Mention the agent in any channel" />
    </Steps>
  );
}
```

```tsx
import { useState } from "react";
import { Step, Steps } from "@botiverse/raft-ui";

export function StepsClickableContent() {
  const [current, setCurrent] = useState(2);

  return (
    <Steps current={current} onUpdateCurrent={setCurrent} className="w-full max-w-2xl">
      <Step title="Account" />
      <Step title="Profile" />
      <Step title="Preferences" />
      <Step title="Publish" disabled />
    </Steps>
  );
}
```

```tsx
import { Star, Upload } from "lucide-react";
import { Step, Steps } from "@botiverse/raft-ui";

const doneIcon = <Star strokeWidth={2.5} />;

const uploadIcon = <Upload strokeWidth={2.5} />;

export function StepsIconContent() {
  return (
    <Steps current={2} finishIcon={doneIcon} className="w-full max-w-xl">
      <Step title="Choose files" />
      <Step title="Upload" icon={uploadIcon} />
      <Step title="Review" />
    </Steps>
  );
}
```

## States

| `status`  | Look                                                                                                                                                    |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `wait`    | Ahead: a `line-seam` outline on paper, the title in `foreground-hint`                                                                                   |
| `process` | Current: a yellow sticker with an ink number                                                                                                            |
| `finish`  | Finished: solid ink with a check                                                                                                                        |
| `error`   | Failed: an orange sticker with a cross, because something going wrong is orange ([Color](https://raft-design.botiverse.build/foundations/color.md#meanings-of-color)) |

```tsx
import { Step, Steps } from "@botiverse/raft-ui";

export function StepsStatusContent() {
  return (
    <div className="grid w-full max-w-2xl gap-8">
      <Steps current={3} status="error">
        <Step title="Build" />
        <Step title="Test" />
        <Step title="Deploy" description="Staging is unreachable" />
        <Step title="Verify" />
      </Steps>
      <Steps current={4} status="finish">
        <Step title="Build" />
        <Step title="Test" />
        <Step title="Deploy" />
        <Step title="Verify" />
      </Steps>
      <Steps current={2}>
        <Step title="Build" />
        <Step title="Test" />
        <Step title="Deploy" status="error" description="Rolled back" />
        <Step title="Verify" status="wait" />
      </Steps>
    </div>
  );
}
```

## Behavior

- Where the row is too narrow for every title, show only the current step's title.

## Content

- Title each step with a short noun phrase: Your team, Computer, First agent. Use sentence case, and Title Case when the steps are clickable ([Typography](https://raft-design.botiverse.build/foundations/typography.md#casing)).

## Accessibility

- Steps is not built on a Base UI primitive. `Steps` renders an `ol`; name it with `aria-label` after the flow ("Setup").
- The current step gets `aria-current="step"`.
- A finished or failed step reads `finishLabel` or `errorLabel` after its title, because its mark says it only by look.
- In clickable steps, each title is a button, described by the step's description.

## API

### OtterIndicator

An otter on its back, one pose per status: - `wait`: asleep on the dry bank, the parcel still on its belly. - `process`: afloat, paddling with one arm, the parcel on its belly. - `finish`: drifting at ease, hugging the delivered parcel. - `error`: shivering in the water; the parcel has slipped away.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` (required) | `StepStatus` |  |  |

Also takes the attributes of its element.

### Step

One step in `Steps`: a numbered marker, a title and a description.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `description` | `ReactNode` |  | Shown under the title. `children` override it. |
| `disabled` | `boolean` | `false` | Keeps the step from being clicked when the steps are clickable. |
| `icon` | `ReactNode` |  | Replaces the number of a step that is waiting or in progress. |
| `status` | `StepStatus` |  | Overrides the status the step gets from `current`. |
| `title` | `ReactNode` |  |  |

Also takes the attributes of its element.

### Steps

Numbered steps through a process, as an ordered list of `Step`s. Each child is numbered by its position; the step at `current` gets `aria-current="step"`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `current` | `number` |  | The current step, counted from 1. Steps before it are `finish`, after it `wait`, and the current one takes `status`. Leave it unset with `defaultCurrent` to let clicks move it. |
| `defaultCurrent` | `number` |  | Initial current step when uncontrolled. |
| `errorIcon` | `ReactNode` |  | Replaces the cross of failed steps. |
| `errorLabel` | `string` | `"Failed"` | Screen-reader text read after a failed step's title. |
| `finishIcon` | `ReactNode` |  | Replaces the check mark of finished steps. |
| `finishLabel` | `string` | `"Completed"` | Screen-reader text read after a finished step's title. |
| `onUpdateCurrent` | `(current: number) => void` |  | Called with the clicked step's number. Setting it turns every step that isn't `disabled` into a button. |
| `status` | `StepStatus` | `"process"` | Status of the current step. |
| `vertical` | `boolean` | `false` | Lays the steps out in a column instead of a row. |

Also takes the attributes of its element.

## Changes

- 0.10.0 (Changed): `Tooltip`, `ComboboxSelect` options, `Steps` and `Timeline` use the type scale instead of fixed sizes, so they follow the desktop values.
- 0.6.0 (Breaking Changes): **Props that no longer change anything are removed:** `Badge` `uppercase`; `Checkbox` `size`, `variant`, `color`; `Status` `pulse`, `attention` (status never animates); `Switch` / `SwitchThumb` `size`; `SidebarItem` `variant`; `SidebarItemCount` / `SidebarItemIndicator` `variant` and `appearance` (the count is always the pink sticker, the indicator the yellow @); `NotificationCenterActionButton` `variant`; `DrawerContent` `width` (one-go forms use the wide `Dialog`); `AppRailItemIndicator` `attention`; `AppRailItemAttention` `children`; `Steps` `size`, `track`, `renderIndicator`, `renderTraveler`; `FilePreviewBadge` `type`, `color`. Remove them at call sites.
- 0.6.0 (Breaking Changes): **Parts and exports removed:** `TabsBackground`, `TabsIndicator`, `MessageReferenceBadge`, `AppRailItemAttentionMask`, `IslandIndicator`, `OtterTraveler`, `tabsRecipe`, `taskStatus`, `taskStatusBorder`, `SidebarItemVariant`, `FilePreviewBadgeColor`, `FilePreviewBadgeType`, `StepIndicatorState`, `StepsSize`, `StepsTrack`, `StepTravelerState`. `OtterIndicator` stays as a standalone illustration.
- 0.6.0 (Fixed): Horizontal `Steps` draw their connector (the column was 0px wide).
- 0.5.58 (Added): `Steps` takes `renderTraveler(state)` on `track="river"`: one traveler (drawn from `{ index, status }`) swims upstream from marker to marker. With a traveler each step after the first is the reach that leads into its marker, the river is full all along and runs back toward the first step, and the markers look as the traveler has got to them: it lands at each finished marker in turn (never skipping one), rests and sets off again, so a marker never shows finished ahead of it. Leg timing comes from `--r-steps-traveler-arrive-duration` and the new `--r-steps-traveler-rest-duration` (0s under reduced motion). The plain river track is unchanged. New `StepTravelerState` type.
- 0.5.57 (Added): `OtterIndicator`: an otter step marker for `Steps` `renderIndicator`, taking a step `status` (`wait` sleeps on the dry bank, `process` paddles on its back, `finish` hugs its parcel, `error` shivers as the parcel floats off). Use with `track="river"` and `--r-steps-indicator-size: 48px`; its CSS now ships in the published package.
- 0.5.57 (Fixed): `Steps` `track="river"` in a wide row sizes each step to its own content and shares the remaining space evenly, so every river reach is the same length even when titles differ in length. The plain connector and the narrow layout are unchanged.
- 0.5.56 (Added): `Steps` takes `track="river"`: the connector becomes a channel that is full of water behind finished steps, has water flowing in behind the step in progress, stalls red half way after a failed step and is a dry bed ahead. Brutal and Elegant recipes, horizontal and vertical, RTL; under reduced motion the water stands still. In a column, `--r-steps-river-overlap-start` / `--r-steps-river-overlap-end` (default 0) reach the channel into a custom marker above / below.