Steps · Cynosure

Shows where the person is

When to use

A flow of a few named steps that the person moves through in order.

Use something else when:

the progress is an amount (bytes, items): ProgressBar
the sections can be visited in any order: Tabs

Usage

tsx

import { Steps } from "@arshad-shah/cynosure";

<Steps
  steps={[
    { id: "account", label: "Account", description: "Email and password" },
    { id: "workspace", label: "Workspace" },
    { id: "done", label: "Done" },
  ]}
  current={step}
/>

Steps before current are complete and steps after it upcoming. Set a step's status to error to flag a problem, or to complete to mark it done out of order.

Errors and overrides

Choosing a step

Pass onStepSelect and each step becomes a button that calls it with the step's id. The current step and steps with disabled: true do nothing when pressed. Which steps may be visited is your decision: disable the ones that are not ready.

Going back updates the steps

Vertical

Props

Every prop of Steps
Prop	What it does	Type	Default
`steps`Required	The steps, in order.	`StepItem[]`
`current`	`id` of the step the person is on. Steps before it are complete, steps after it upcoming. Leave it out for a numbered how-to (steps to follow, not progress): every step is numbered alike and no status is read.	`string`
`orientation`	Lays the steps out in a row or in a column. Default "horizontal".	`"horizontal" \| "vertical"`	`"horizontal"`
`onStepSelect`	Makes steps buttons that go to that step. Leave it out for a read-only progress display.	`((id: string) => void)`
`size`	Text size of labels and markers.	`Size`
`labels`	Replace the built-in English text: the list's name and the status read after each step.	`Partial<StepsLabels>`
`className`	Added to the root element, for layout.	`string`
`style`	Layout only. Restyle through --cy-steps-* tokens.	`CSSProperties`

Generated from the type definitions in @arshad-shah/cynosure 0.5.0.

Behaviour and accessibility

Structure: an ordered list named "Progress" (labels.list). The current step has aria-current="step", and each step says its state after its label: "completed", "current step", "not started" or "has a problem" (all in labels).
Keyboard (with onStepSelect):

Behaviour and accessibility, table 1
Key	Action
Tab / Shift+Tab	Move between steps
Enter / Space	Go to the focused step

Touch: steps are at least 44px square on touch screens (24px with a mouse).
Contrast: labels keep 4.5:1, markers 3:1 against the page, in light and dark modes.
Direction: steps run with the text direction.

Theming

Tokens: --cy-steps-marker-size, --cy-steps-line-width and --cy-steps-gap. Colours come from the accent, danger, line and muted tokens.

createTheme({ components: { steps: { markerSize: "32px", lineWidth: "1px" } } });

ProgressBar · Tabs

When to useLink to "When to use"

UsageLink to "Usage"

Choosing a stepLink to "Choosing a step"

VerticalLink to "Vertical"

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

ThemingLink to "Theming"

RelatedLink to "Related"