Order
OrderTimeline
Visual timeline of order status history with icons and timestamps.
OrderTimeline
Displays order status transitions as a vertical timeline with status-colored icons, timestamps, and optional notes.
Preview
delivered
Package was handed to the recipient
shipped
Package arrived at local delivery facility
shipped
Package in transit — left sorting center
processing
Order is being packed and labeled
pending
We received your order
Usage
<COrderTimeline :entries="order.history" />
Example Data
const entries = [
{ status: 'pending', timestamp: '2024-01-15T10:00:00Z' },
{ status: 'processing', timestamp: '2024-01-15T12:30:00Z', note: 'Payment confirmed' },
{ status: 'shipped', timestamp: '2024-01-16T09:00:00Z', note: 'Tracking: ABC123' },
{ status: 'delivered', timestamp: '2024-01-18T14:20:00Z' },
]
Props
| Prop | Type | Default | Description |
|---|---|---|---|
entries | OrderHistoryEntry[] | required | Status history entries |
ui | Partial<{...}> | — | Per-instance theme overrides |
Status Icons & Colors
| Status | Icon | Color |
|---|---|---|
pending | clock | warning |
processing | cog | info |
shipped | truck | primary |
delivered | check-circle | success |
cancelled | x-circle | error |
refunded | arrow-uturn-left | muted |
returned | arrow-path | muted |