All components (204)

Steps

Navigation · Steps · .amset-steps

What it is and when to use it

The phases of a process that moves forward: checkout (cart, shipping, payment, confirmation), the registration of a customer or where an order is. Each step states its status with a word ("Done", "In progress", "Pending", "Failed"), in addition to the color and the mark.

When to use it

To show how many steps there are and which one you are on. With current (the index of the step in progress, from 0) it is enough: earlier ones come out done and later ones pending. A state on a step (done, in-progress, pending or error) takes precedence over that count (a rejected payment).
With onPress each step is a button, to go back to an already completed phase of a form.
orientation="vertical" in a narrow column or with long descriptions; statusText if the process is not "steps" (a shipment that "Arrived"). numbered={false} removes the numbers from the circles.
size sm, md or lg like the rest of the library: lg when the steps are the main thing on the screen (checkout), sm inside a card.

When not to

For what has already happened, with date and author: History.
For an entire step-by-step form, with its validation and its buttons: Wizard, which already carries these steps inside.
On mobile, where four columns of text do not fit: CurrentStep ("Step 3 of 4").

Keyboard: without onPress there is nothing to press and it does not take focus. With onPress, Tab goes through the steps and Enter or Space press them; a step with disabled neither takes focus nor responds.

Accessibility: it is an ordered list (ol) with a name (label), so you hear how many steps there are. The step in progress carries aria-current="step" and the status of each one is written out: in black and white, or without telling green from red, a colored circle says nothing. The numbers (written in the language) and the marks are decorative. With no steps it draws nothing: an empty list only serves to make the reader say "0 items".

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how the step numbers are written.

Fine-tuning: --amset-steps-brand is the side of the circle (1.75 rem; 1.375 in sm and 2.25 in lg), and from it come the lines that join the steps, which this way always pass through their center. The rest, with the classes amset-steps, amset-steps__brand, amset-steps__title and amset-steps__state.

What it looks like

Out for delivery

The courier has it today: it arrives tomorrow before 2 PM.

<Steps
  label="Tracking for order 1042"
  current={paso}
  steps={[
    { key: 'recibido', title: 'Received', description: 'Oct 12' },
    { key: 'preparado', title: 'Packed', description: 'Oct 13' },
    { key: 'reparto', title: 'Out for delivery', description: 'Arrives tomorrow' },
    { key: 'entregado', title: 'Delivered' },
  ]}
  onPress={(clave, indice) => setPaso(indice)}
/>
<Alert tone="warning" title="Out for delivery">
  El repartidor lo lleva hoy: llega manana antes de las 14:00.
</Alert>

Props

Import it with import { Steps } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which process these steps belong to. Required: it is the name of the list.
`steps`required	`readonly Step[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`current`	`number`	Index of the current step (the first is 0).
`numbered`	`boolean`	Numbers the steps instead of leaving only the dot.
`onPress`	`(key: string, index: number) => void`	Makes each step pressable: to go back in a multi-step form.
`orientation`	`"horizontal" \| "vertical"`	—
`size`	`"sm" \| "md" \| "lg"`	Size of the marks and the text: `sm`, `md` (default) or `lg`.
`statusText`	`Readonly<Record<StepStatus, string>>`	Custom text for each state (in case the process is not "steps").

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-steps-brand`	`1.75rem`
`--amset-steps-brand-font`	`var(--amset-text-sm)`
`--amset-steps-icon`	`0.875rem`
`--amset-steps-gap`	`var(--amset-space-2)`
`--amset-steps-title`	`var(--amset-text-base)`
`--amset-steps-description`	`var(--amset-text-sm)`
`--amset-steps-state`	`var(--amset-text-xs)`

How to change it

.amset-steps {
  --amset-steps-brand: ...;
  --amset-steps-brand-font: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: