Skip to content
Twentyfirst UIHalo

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.
Placed12 Apr, 09:14
Paid12 Apr, 09:15
Packed12 Apr, 15:40
Shipped13 Apr, 08:02
Delivered—
PlacedJust now
PaidJust now
Packed—
Shipped—
Delivered—
Placed—
Paid—
Packed—
Shipped—
Delivered—
Refunded

Props

OrderTimeline

PropTypeNotes
status"Placed" | "Paid" | "Packed" | "Shipped" | "Delivered" | "Refunded" | "Cancelled"Required
times?Record<string, string>
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.