Raft 设计系统
English

组件 · 导航

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.

稳定也叫 Stepper
import { Steps } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

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.

steps/compositions/preview

When to use

SituationUse
A flow of 3 to 5 steps taken in orderSteps
A flow of more than 5 stepsSplit it into 2 flows, each with its own Steps
How far one operation has gotProgress
Sections people visit in any orderTabs
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

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

VariantUse for
A row (default)Most flows
verticalThe 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
steps/compositions/vertical
steps/compositions/clickable
steps/compositions/icon

States

statusLook
waitAhead: a line-seam outline on paper, the title in foreground-hint
processCurrent: a yellow sticker with an ink number
finishFinished: solid ink with a check
errorFailed: an orange sticker with a cross, because something going wrong is orange (Color)
steps/compositions/status

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).

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类型默认值
status (required)StepStatus

Also takes the attributes of its element.

Step

One step in `Steps`: a numbered marker, a title and a description.
Prop类型默认值
descriptionShown under the title. `children` override it.ReactNode
disabledKeeps the step from being clicked when the steps are clickable.booleanfalse
iconReplaces the number of a step that is waiting or in progress.ReactNode
statusOverrides the status the step gets from `current`.StepStatus
titleReactNode

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类型默认值
currentThe 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.number
defaultCurrentInitial current step when uncontrolled.number
errorIconReplaces the cross of failed steps.ReactNode
errorLabelScreen-reader text read after a failed step's title.string"Failed"
finishIconReplaces the check mark of finished steps.ReactNode
finishLabelScreen-reader text read after a finished step's title.string"Completed"
onUpdateCurrentCalled with the clicked step's number. Setting it turns every step that isn't `disabled` into a button.(current: number) => void
statusStatus of the current step.StepStatus"process"
verticalLays the steps out in a column instead of a row.booleanfalse

Also takes the attributes of its element.

相关组件

改动

  • 0.10.0 · ChangedTooltip, ComboboxSelect options, Steps and Timeline use the type scale instead of fixed sizes, so they follow the desktop values.
  • 0.6.0 · Breaking ChangesProps 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 ChangesParts 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 · FixedHorizontal Steps draw their connector (the column was 0px wide).
  • 0.5.58 · AddedSteps 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 · AddedOtterIndicator: 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 · FixedSteps 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 · AddedSteps 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.