docs / patterns / step-chips

StepChips

a short numbered sequence in one row, sized to sit inside a banner or under a heading rather than to carry a page.

intensity · structuresrsc · server

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

inside a CtaBanner or under a section heading, as a one-line pitchthree or four steps of a few words eachno interactive steps. it describes a sequence, it does not track oneno bodies under the steps, that is StepList

a11y

an ordered list, so position comes free · the number and arrow are aria-hidden to avoid double announcing · takes aria-labeljest-axe
live demo · try it out
  1. Install the extension
  2. Sign in
  3. Done
usagecopy
import { StepChips } from "@usva-ui/react/patterns/step-chips";

<StepChips
  aria-label="Setup steps"
  steps={["Install the extension", "Sign in", "Done"]}
/>

props

proptypedefaultnotes
stepsReact.ReactNode[]—the steps, in order. keep each one a few words.
aria-labelstring—names the sequence, e.g. "Setup steps".

get it

bun add @usva-ui/reactcopy
usagecopy
import { StepChips } from "@usva-ui/react/patterns/step-chips";

<StepChips
  aria-label="Setup steps"
  steps={["Install the extension", "Sign in", "Done"]}
/>