# Order Status

> A composable fulfillment timeline with card, plain, and compact variants.

- Category: Commerce
- Kind: component
- Page: https://uaiblocks.dev/components/order-status
- Registry item: https://uaiblocks.dev/r/order-status.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/order-status.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/order-status.json
```

## Usage

```tsx
"use client";

import {
  OrderStatus,
  OrderStatusAction,
  OrderStatusActions,
  OrderStatusBadge,
  OrderStatusDescription,
  OrderStatusDetail,
  OrderStatusDetails,
  OrderStatusHeader,
  OrderStatusProgress,
  OrderStatusStep,
  OrderStatusStepDescription,
  OrderStatusStepTitle,
  OrderStatusTitle,
  type OrderStatusVariant,
} from "@/components/ui/uai/order-status";

export function OrderStatusPreview({ variant = "card" }: { variant?: OrderStatusVariant }) {
  return (
    <div className={variant === "compact" ? "w-full max-w-[320px]" : "w-full max-w-[380px]"}>
      <OrderStatus variant={variant}>
        <OrderStatusHeader>
          <div className="min-w-0">
            <OrderStatusTitle>Arriving Friday</OrderStatusTitle>
            <OrderStatusDescription>Order #UAI-2048 · 2 items</OrderStatusDescription>
          </div>
          <OrderStatusBadge tone="progress">In transit</OrderStatusBadge>
        </OrderStatusHeader>
        <OrderStatusProgress>
          <OrderStatusStep status="complete">
            <OrderStatusStepTitle>Order confirmed</OrderStatusStepTitle>
            <OrderStatusStepDescription>Aug 15 · 9:42 AM</OrderStatusStepDescription>
          </OrderStatusStep>
          <OrderStatusStep status="complete">
            <OrderStatusStepTitle>Shipped</OrderStatusStepTitle>
            <OrderStatusStepDescription>Aug 17 · Northstar Parcel</OrderStatusStepDescription>
          </OrderStatusStep>
          <OrderStatusStep status="current">
            <OrderStatusStepTitle>In transit</OrderStatusStepTitle>
            <OrderStatusStepDescription>
              Departed the regional facility in Austin, TX
            </OrderStatusStepDescription>
          </OrderStatusStep>
          <OrderStatusStep status="upcoming">
            <OrderStatusStepTitle>Delivered</OrderStatusStepTitle>
            <OrderStatusStepDescription>Expected Aug 21 by 8:00 PM</OrderStatusStepDescription>
          </OrderStatusStep>
        </OrderStatusProgress>
        <OrderStatusDetails>
          <OrderStatusDetail label="Carrier">Northstar Parcel</OrderStatusDetail>
          <OrderStatusDetail label="Tracking">NSP-2048-1182</OrderStatusDetail>
        </OrderStatusDetails>
        <OrderStatusActions>
          <OrderStatusAction href="https://example.com/track" emphasis="primary">
            Track package
          </OrderStatusAction>
          <OrderStatusAction href="https://example.com/help">Get help</OrderStatusAction>
        </OrderStatusActions>
      </OrderStatus>
    </div>
  );
}
```

## Anatomy

- `OrderStatus`
  - `OrderStatusHeader`
    - `OrderStatusTitle`
    - `OrderStatusDescription`
    - `OrderStatusBadge`
  - `OrderStatusProgress`
    - `OrderStatusStep`
      - `OrderStatusStepTitle`
      - `OrderStatusStepDescription`
  - `OrderStatusDetails`
    - `OrderStatusDetail`
  - `OrderStatusActions`
    - `OrderStatusAction`

## Accessibility

- The root is labelled by the composed order status title.
- Fulfillment stages retain ordered-list semantics.
- The current stage exposes aria-current without relying on color.
- Complete, current, upcoming, and issue states include visible text labels.
- Tracking facts retain description-list semantics and wrap long values.
- Card, plain, and compact variants preserve the same semantic structure.