Order Timeline
Commerce · OrderTimeline
Five-step fulfilment progress for an order: Placed, Paid, Packed, Shipped, Delivered.
Props: status (one of the five, or "Refunded" / "Cancelled" which dims the line and shows a badge), times ({step: text}).
- Use the same five words as the order status badges, so list and detail agree.
- The current step gets a sky ring and a clock until it's done.
PlacedApr 12, 09:14
PaidApr 12, 09:15
PackedApr 12, 15:40
ShippedApr 13, 08:02
Delivered—
PlacedJust now
PaidJust now
Packed—
Shipped—
Delivered—
Placed—
Paid—
Packed—
Shipped—
Delivered—
Refunded
Props
OrderTimeline
| Prop | Type | Notes |
|---|---|---|
status | "Placed" | "Paid" | "Packed" | "Shipped" | "Delivered" | "Refunded" | "Cancelled" | Required |
times? | Record<string, string> | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |