Steps
Where a process stands, as an ordered list of numbered steps.
- Name and region
- Pick the machine
- Invite your team
import { Step, Steps } from "raft-ui";
<Steps current={2}>
<Step title="" description="" />
<Step title="" />
</Steps>current counts from 1: steps before it finish, steps after it wait. status sets the current step's status: process (the default), finish, error or wait. A Step's own status overrides the one it gets from current. The current step carries aria-current="step", and finished and failed steps read out their status after the title.
- Build Completed
- Test Completed
- Deploy FailedStaging is unreachable
- Verify
- Build Completed
- Test Completed
- Deploy Completed
- Verify Completed
- Build Completed
- Test
- Deploy FailedRolled back
- Verify
vertical lays the steps out in a column and lets long titles wrap. A row fits a phone too: below 640px each step's text moves under its marker and the titles wrap. For more than four or five steps, or long titles, prefer vertical on small screens.
- Add a machine CompletedConnect a machine to the workspace
- Configure the agentChoose a runtime and the tools it can use
- Start a conversationMention the agent in any channel
finishIcon and errorIcon replace the check and the cross for every step; a Step's icon replaces its number while it waits or is in progress.
- Choose files Completed
- Upload
- Review
With onUpdateCurrent each step's title becomes a button whose hit area covers the marker and the description; clicking it reports the step's number. disabled keeps a step from being picked. Pass defaultCurrent instead of current to let clicks move the current step on their own.
currentdefaultCurrentstatusdefault: "process"verticaldefault: falsefinishIconerrorIconfinishLabeldefault: "Completed"errorLabeldefault: "Failed"onUpdateCurrent...props| Prop | Type | Default | Description |
|---|---|---|---|
current | number | — | The current step, counted from 1. Steps before it finish, steps after it wait. Without it every step is in progress. |
defaultCurrent | number | — | Initial current step when uncontrolled; clicks then move it. |
status | "process" | "finish" | "error" | "wait" | "process" | Status of the current step. |
vertical | boolean | false | Lays the steps out in a column instead of a row. |
finishIcon | ReactNode | — | Replaces the check mark of finished steps. |
errorIcon | ReactNode | — | Replaces the cross of failed steps. |
finishLabel | string | "Completed" | Screen-reader text read after a finished step's title. |
errorLabel | string | "Failed" | Screen-reader text read after a failed 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. |
...props | ComponentPropsWithRef<"ol"> | — | Native ordered-list attributes. Children are Steps, numbered by position. |
titledescriptionstatusicondisableddefault: false...props| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | The step's title; the marker centers on its first line. |
description | ReactNode | — | Shown under the title. children override it. |
status | "process" | "finish" | "error" | "wait" | — | Overrides the status the step gets from current. |
icon | ReactNode | — | Replaces the number while the step waits or is in progress. |
disabled | boolean | false | Keeps the step from being clicked when the steps are clickable. |
...props | ComponentPropsWithRef<"li"> | — | Native list-item attributes. |