ecommerce pattern
Wishlist
Saved products for later purchase.
When to use it
Account → Wishlist or hearted-products view.
- Move-to-cart in 1 tap
- Share wishlist via link
Layout regions
- header
- main
- toolbar
- Move-all + share buttons
States
- default
- Items present
- empty
- No items
Example
<Container><h1>Wishlist</h1><Grid variant="auto" min="240px">{items.map((p) => <WishlistTile key={p.id} {...p} />)}</Grid></Container>The full Wishlist pattern specifies 3 exact microcopy strings, 1 motion spec, 3 composition rules — all gated behind the full recipe. Get the full recipe.