All components (204)

Order status

Commerce · OrderStatus

What it is and when to use it

Where a shipment is: the milestones in order with their date, the current one marked and what is left waiting. On top, a sentence that can be read at a glance, the tracking number with its copy button and the link to the carrier's website.

When to use it

In "My orders" and on the tracking page of an order.
The state of each milestone (milestones) comes from the dates alone: the last one with a date is the current one, the ones before are done and the ones without a date are pending. detail says where it happened or who did it.
failed on a milestone that did not go well (failed delivery, returned to sender): it cuts the chain and the sentence on top stops giving a date to warn that something has to be done.
delivery adds the expected date to the sentence on top while something is still missing: with the last milestone already completed (delivered), the sentence gives no date.
tracking opens the shipment line; carrier and link only appear with it.

When not to

The phases of a process that moves forward, without dates or carrier (a sign-up, a wizard): Steps.
A record of what has already happened, with nothing pending: History.

Keyboard: only the copy button for the tracking number and the link to the carrier take focus, in that order; the rest is read.

Accessibility: it is a named region (label, required) and the milestones are an ordered list: you know how many steps there are and which one you are on. The current one carries aria-current="step", and the state of each milestone is written for the screen reader ("done", "current step", "pending", "did not go well"), not only in the color of the dot. The link warns that it opens in another tab, and when the number is copied it says "Copied".

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

Fine-tuning: CSS variables --amset-order-state-*: -brand, -brand-icon, -detail, -gap, -hito-gap, -line, -title. The size changes the circle of the milestone, its icon, the line that joins them and the font sizes.

What it looks like

Payment confirmed (done)Oct 12, 09:12
Preparing the order (done)Getafe warehouseOct 12, 17:40
On its way (current step)Coslada logistics centerOct 13, 08:05
Out for delivery (pending)
Delivered (pending)

<OrderStatus
  label="Tracking for order 1042"
  milestones={[
    { key: 'pagado', title: 'Payment confirmed', date: '2026-10-12T09:12' },
    { key: 'enviado', title: 'On its way', date: '2026-10-13T08:05', detail: 'Coslada logistics center' },
    { key: 'entregado', title: 'Delivered' },
  ]}
  delivery="2026-10-16"
  tracking="AM123456789ES"
  carrier="Correos Express"
/>

Props

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

Prop	Type	What it does
`label`required	`string`	Which order it is. Required: it names the entire region.
`milestones`required	`readonly OrderMilestone[]`	—
`carrier`	`string`	Who carries it: it appears before the number. Only with `tracking`.
`className`	`string`	Merged with the library classes; it does not replace them.
`delivery`	`string`	Expected delivery date, `YYYY-MM-DD`. It shows in the summary while the order has not reached the last milestone; once delivered, it no longer does.
`link`	`string`	Link to tracking on the carrier's website. Only with `tracking`.
`size`	`"sm" \| "md" \| "lg"`	—
`tracking`	`string`	Tracking number, which can be copied. It is what opens the shipping line: without it neither `carrier` nor `link` is painted.

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

In the test bench

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