Skip to content

Steps

Shows progress through a multi-step flow: which steps are done, which is current and what comes next.

betaSource
  1. Details, completed
  2. Upload
  3. Review

Step 2 of 3Upload

Installation

pnpm add @syntara/react @syntara/tokens
import { Steps } from '@syntara/react';

Usage

import { Steps } from '@syntara/react';

const steps = [
  { id: 'details', label: 'Details' },
  { id: 'upload', label: 'Upload' },
  { id: 'review', label: 'Review' },
];

export function ClaimProgress() {
  return <Steps current="upload" steps={steps} />;
}

Examples

Go back to a step

onStepPress turns completed steps into buttons.

  3. HealthA few questions
  4. PaymentMonthly or yearly

Step 3 of 4Health

Vertical with descriptions

A second line per step, stacked for side panels and narrow layouts.

  1. Incident details, completedDate, place and what happened
  2. Treatment, completedHospital or clinic and doctor
  3. DocumentsInvoices, prescriptions, reports
  4. Bank accountWhere we send the payment
  5. Review and submit

Accessibility

KeysAction
TabWith onStepPress, moves between completed steps.
EnterorSpaceGoes back to the focused completed step.
  • An ordered list; the current step has aria-current="step".
  • Completed steps show a check mark and carry visually hidden text (", completed"); status never relies on colour.
  • Step numbers in the markers are decorative — the list order conveys them.
  • Horizontal steps respond to their own width: under 480px (3 steps) or 640px (4+), they collapse to a text summary and a segmented bar.

Guidelines

Do

  • Keep to 3–5 steps with one- or two-word labels.
  • Let people go back to completed steps when their answers are kept.
  • Put the same step names in the page headings.

Don’t

  • Don't make upcoming steps clickable when earlier answers are required.
  • Don't use Steps for tabs or navigation between unrelated pages.
  • Don't show more than about 6 steps — group them.

API reference

Steps

stepsRequired
{ id: string; label: ReactNode; description?: ReactNode }[]

The steps in order.

currentRequired
string

Id of the current step. Earlier steps are complete, later ones upcoming.

orientation
  • horizontaldefault
  • vertical

Horizontal collapses to "Step 2 of 3 · Upload" and a segmented bar when its container is narrow.

onStepPress
(id: string) => void

Makes completed steps buttons that go back to that step.

aria-label
string

Name of the list.

Default 'Progress'

completedLabel
string

Read after a completed step's label by screen readers ("Details, completed").

Default 'completed'

stepLabel
string

Word used in the narrow summary.

Default 'Step'

ofLabel
string

Word used in the narrow summary.

Default 'of'

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour9
focus.ringaction.primary.hoverborder.strongtext.subtleaction.primary.bgaction.primary.fgsurface.defaulttext.defaultborder.default
Type5
font.size.smfont.weight.mediumline-height.snugfont.size.xsfont.weight.semibold
Space and size6
control-heightspace.2space.3space.6space.4space.1
Shape2
radius.badgeradius.pill
Depth2
shadow.highlightshadow.raised
Motion7
motion.duration.normalmotion.easingmotion.duration.slowmotion.duration.fastmotion.easing-outmotion.duration.springmotion.spring