Skip to content

Order status

Preview Available in release assets

Render authoritative order progress, timestamps, expectations, and durable receipt and support destinations.

Server contract

The application owns the route for this supporting commerce state renders the complete server-owned order-status view for native navigation; a Datastar request to the same action returns the stable fragment only. Never embed payment controls or treat browser state as commerce truth.

Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.

Order status primary example

Show code
<main class="thin-order-status" aria-labelledby="order-title">
  <header>
    <p>Order TS-1042</p>
    <h1 id="order-title">On the way</h1>
    <p role="status">Updated August 1 at 6:40 PM CDT</p>
  </header>
  <ol class="thin-order-timeline">
    <li data-state="complete">
      <h2>Order confirmed</h2>
      <p><time datetime="2026-07-30T14:12:00-05:00">July 30, 2:12 PM</time></p>
    </li>
    <li data-state="complete">
      <h2>Shipped</h2>
      <p><time datetime="2026-07-31T09:18:00-05:00">July 31, 9:18 AM</time></p>
    </li>
    <li aria-current="step">
      <h2>In transit</h2>
      <p>Expected August 3. Carrier updates can be delayed.</p>
    </li>
    <li>
      <h2>Delivered</h2>
      <p>Not yet delivered.</p>
    </li>
  </ol>
  <p>
    <a href="/orders/TS-1042/receipt">View receipt</a> · <a href="/support/orders/TS-1042">Get order help</a>
  </p>
</main>

Anatomy

  • Order identity
  • Current status
  • Timestamped timeline
  • Expectation text
  • Receipt and support links

Variants and sizes

  • Neutral theme
  • Thin-Sky theme
  • Intrinsic narrow and wide containers

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Confirmed
  • Processing
  • Shipped
  • In transit
  • Delivered
  • Delayed
  • Cancelled
  • Returned

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Normal links and forms navigate and submit to server routes. Returned HTML owns prices, inventory, discounts, validation, totals, and order state.

Accessibility

Use landmarks, headings, labelled native controls, linked error summaries, visible status text, logical reading order, and non-color state cues. Move focus on server navigation, not speculative client updates.

Contract
COMPOSE
Basis
Native forms, tables/lists, headings, links, and status content; no APG widget
Evidence
  • tests/unit/library/cart-checkout.test.ts

API

The application owns the route for this supporting commerce state renders the complete server-owned order-status view for native navigation; a Datastar request to the same action returns the stable fragment only. Never embed payment controls or treat browser state as commerce truth.

Behavior tier: dependency-free

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /patterns/ecommerce.css

Dependencies: field, quantity-input, alert, status, steps

Source: packages/ui/src/style/ecommerce.ts