Steps

A numbered list of things to do, in order.

Overview

The way into a product: install, log in, run.

Numbers

Do
  1. Install the CLI
    Run bun add -d pixelslash in your repo.
  2. Upload a build
    Run pixelslash upload.
import { Code, Step, Steps } from "@hackcove/ui";

<Steps aria-label="Get started">
  <Step title="Install the CLI">
    Run <Code>bun add -d pixelslash</Code> in your repo.
  </Step>
  <Step title="Upload a build">
    Run <Code>pixelslash upload</Code>.
  </Step>
</Steps>
Steps numbers itself: give each Step a title and a line of detail, in the order they are done.
Don't
  1. 1. Install the CLI
    Run bun add -d pixelslash in your repo.
  2. 2. Upload a build
    Run pixelslash upload.
import { Step, Steps } from "@hackcove/ui";

<Steps aria-label="Get started">
  <Step title="1. Install the CLI">Run bun add -d pixelslash in your repo.</Step>
  <Step title="2. Upload a build">Run pixelslash upload.</Step>
</Steps>
Typed numbers double up with the ones Steps draws, and drift when a step is added. Leave the numbering to Steps.

Order

Do
  1. Sign in
  2. Pick a project
  3. Upload a build
import { Step, Steps } from "@hackcove/ui";

<Steps>
  <Step title="Sign in" />
  <Step title="Pick a project" />
  <Step title="Upload a build" />
</Steps>
Steps is for things done in order, from the first to the last.
Don't
  1. Light and dark themes
  2. Keyboard shortcuts
  3. Email digests
import { Step, Steps } from "@hackcove/ui";

<Steps>
  <Step title="Light and dark themes" />
  <Step title="Keyboard shortcuts" />
  <Step title="Email digests" />
</Steps>
Numbering features that have no order tells the reader there is a sequence to follow. Use a BulletList.

Usage

  • Give each Step a title and, as its children, one line of detail. A step with only a title is fine.
  • Do not type the numbers: Steps counts them, so a step can sit behind a condition and the rest still run 1, 2, 3.
  • For things done in order only. Nothing here is done or current, so it is not a progress indicator.
  • A list with no order is a BulletList.
  • In an empty view, put Steps inside the EmptyState as the "get started" list.

Accessibility

  • Steps is an <ol role="list"> and each Step an <li>, so a screen reader announces the list and each step's position.
  • The drawn number is aria-hidden, so it is not read twice.
  • Name the list with aria-label.

API

Steps

A numbered list of things to do, in order: a title and, under it, a line of children. The numbers are counted by CSS, so Steps can sit in a fragment or behind a condition and still run 1, 2, 3. For the way into a product ("install, log in, run"), not for progress: nothing here is done or current. A wizard's progress indicator is a different part (HC-108, Stepper).

Step

One step of Steps: a title in medium weight and the children as the detail under it.

title required
Type
ReactNode