ecommerce pattern
Order confirmation
Post-checkout success page. Shows order number, summary, next steps.
When to use it
Successful checkout completion. Default redirect target.
- Reassurance the order is placed
- Order number copyable
- Email receipt mentioned
Layout regions
- header
- hero
- summary
- next-steps
States
- default
Example
<Container variant="md"><Stack align="center" size="6"><CheckCircleIcon className="text-success" /><h1>Order placed</h1><p>Order #{order.number}</p></Stack></Container>The full Order confirmation pattern specifies 3 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.