An E-Com Toast confirms a shopping action without leaving the page: a product added to the cart, or saved to the wishlist. It has no status color; it speaks in the store’s own black and white.
Every example is the real component, and every “Show toast” button fires a real toast in the corner of your window. System messages and errors use the Toast. Figma: E-Com Toast.
Choose a variant and edit the text. Press Show toast to see it arrive in the corner of your window. With Auto-hide on it leaves after the chosen time (4 seconds by default); off, it stays until you close it.
The markup has no motion. Slide-in and slide-out animation is set in Motion.
Add to cart shows the cart toast with its two next steps. Add to wishlist shows the informational toast; press it again to remove. The toast closes after 4 seconds, with ×, or on a click outside it.
Nothing happened yet.
An E-Com Toast confirms a shopping action without leaving the page: a product added to the cart, or saved to the wishlist. It has no status color; it speaks in the store’s own black and white.
It is a task-generated notification, like the Toast, and it enters the same way. System messages and errors use the Toast, never the E-Com Toast. Not sure which one to choose? Start at the Notifications guide.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use an E-Com Toast. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to show an E-Com Toast from script and the CSS behind it.
Use an E-Com Toast for a product interaction. Use it to:
The E-Com Toast has no status color and no status icon, so it cannot carry a failure. Use the Toast for errors and system messages.
The product name is in bold and the text says what happened to it. A message with no product name leaves the user guessing.
| The message… | Use |
|---|---|
| confirms a product was added to the cart or wishlist | E-Com Toast (this page) |
| confirms any other action, or reports an error | Toast |
| needs the user to confirm before it happens | Modal |
object-fit: contain.Two variants. There is no status or emphasis property: pick the variant by how much the user can do next.
White surface with the product image and two ways forward: choose accessories or go to the cart.
Black surface with light text and an optional underlined link. For short information that needs little or no interaction, such as “added to wishlist”.
Add to cart is 440px wide from 640px and 375px below; Informational is 375px at every breakpoint. Padding and text are listed under Sizes in Specifications. Tablet (640–768px) already has the wide card and 24px padding; only the buttons are mobile-sized.
The image, the text and the × sit on one row, top-aligned. The buttons are on a row below, with the Primary button filling the rest. In Informational the link wraps after the text with an 8px and a 12px gap.
The same as the Toast: fixed in the top-right corner of the window, and from the top at the full width on mobile. One toast at a time.
440px (Add to cart) or 375px (Informational) from 640px, never wider than the window. Below 640px both fill the width.
Add to cart is white; Informational is black with an inverted text and a 1px edge. Both use the highest shadow. Token names and values are under Design Tokens in Specifications.
The toast closes with the ×, with a click outside it, or by itself after 4 seconds. A click on a button or the link runs its action and closes the toast.
Buttons, the link and the × take focus with a visible ring, on keyboard use only. In Informational the link loses its underline on hover. All states are under States in Specifications.
Same as the Toast: it only slides, 300ms. Try other values under Motion above, and see Motion in Specifications.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves to the buttons, the link and the ×, each with a visible focus ring. The toast does not take focus when it appears.
The toast area is role="status" with aria-live="polite", so the message is announced without moving focus. The product image is decorative (alt=""): the name is in the text.