Order
OrderCard
Order summary card showing order number, status badge, item thumbnails, and total.
OrderCard
Displays an order in a compact card format with header (order number, date, status badge), stacked item thumbnails, and a footer with total and "View Details" action.
Preview
Usage
<COrderCard :order="order" />
Custom Actions
<COrderCard :order="order">
<template #actions>
<UButton size="xs" color="primary">Track Order</UButton>
</template>
</COrderCard>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
order | Order | required | Order data from @commercejs/types |
ui | Partial<{...}> | — | Per-instance theme overrides |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
items | { items } | Custom item thumbnails area |
actions | — | Custom footer actions |
Status Colors
The status badge automatically maps to semantic colors:
| Status | Color |
|---|---|
pending | warning |
processing | info |
shipped | primary |
delivered | success |
cancelled | error |
refunded | neutral |
returned | neutral |