ecommerce pattern

Order history

List of user's past orders. Filter by status, search by order number.

When to use it

Account → Orders.

  • Find an order in <5s
  • Filter by status
  • Re-order in 1 tap

Layout regions

  • header
  • main
  • toolbar

States

  • default
  • empty
  • loading

Example

<Container><Card><CardHeader><CardTitle>Orders</CardTitle></CardHeader><CardContent><Toolbar /><DataTable rows={orders} columns={orderColumns} /></CardContent></Card></Container>

The full Order history pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Order history pattern in your project.