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.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from E-Com Toast.
Resolved from the live token package.
| Variant | Part | Token | Value |
|---|
Tablet is 640 to 768px. The Figma axes are Variant and Breakpoint.
| Property | Desktop (769px+) | Tablet (640–768px) | Mobile (below 640px) |
|---|---|---|---|
| Width, Add to cart | 440px | 440px | 375px |
| Width, Informational | 375px | 375px | 375px |
| Padding | 24px | 24px | 16px |
| Text | Name bold 16/18 + text body-md 17/24, 0.32px, at every breakpoint | same | same |
| Buttons | 32px high, label-sm 14px, 0.56px, padding 6px | 32px high, label-md 14px, 0.42px, padding 4px | same as tablet |
| Informational link | body-md 17/24, underlined, wraps after the text with 8px / 12px gaps | 17/24 | 16/22 |
| Gap image to text | 16px | 16px | 16px |
| Gap content to close | 12px | 12px | 12px |
| Shadow | var(--shadow-elevation-b-80) | same | same |
Same as the Toast: fixed in the top-right corner (from the top, full width, on mobile).
| Breakpoint | Top | Right | Width |
|---|---|---|---|
| lg (1024px+) | 40px | 40px | 440px or 375px |
| md (769–1023px) | 32px | 32px | 440px or 375px |
| sm (640–768px) | 32px | 32px | 440px or 375px |
| xs (0–639px) | 0 | 0 (left 0) | Full viewport width |
The padding of the Add to cart toast. The numbers are read from the component.
| Attribute | Desktop (769px+) and tablet | Mobile (below 640px) |
|---|---|---|
| Padding, Add to cart | 24px | 16px |
| Padding, Informational | 24px, of which 1px is the edge (23px + 1px) | 16px, of which 1px is the edge (15px + 1px) |
| Gap image to text | 16px | 16px |
| Gap content to close | 12px | 12px |
| Above the buttons | 16px | 16px |
| Between the buttons | 8px | 8px |
The same distances as spacing tokens.
| Part | Value |
|---|---|
| Padding, tablet and desktop | space-24 |
| Padding, mobile | space-16 |
| Image to text | space-16 |
| Content to close | space-12 |
| Above the buttons | space-16 |
| Between the buttons | space-8 |
| Part | Token | Value |
|---|---|---|
| E-Com Toast | shadow-elevation-b-80 | The same shadow as the Toast. |
Both variants. An E-Com Toast has no hover or disabled state of its own: the buttons, the link and the × have. Its lifecycle is under Motion.
| Variant | Example |
|---|
| Element | Token | Mobile and tablet | Desktop (769px+) |
|---|---|---|---|
| Product name | title-sm | 16/18, bold | 16/18, bold |
| Text | body-md | 17/24, 0.32px | 17/24, 0.32px |
| Buttons | label-md / label-sm | 14/14, 0.42px | 14/14, 0.56px |
| Informational link | body-md | 16/22 | 17/24 |
The text is 17/24 at every breakpoint, as in Figma. This pair is body-md on desktop.
| Element | Class | Notes |
|---|---|---|
| Toast | ecom-toast ecom-toast--cart or --info | Add to cart or Informational. |
| Header | ecom-toast__header, ecom-toast__image-text | Image, text and ×. Add to cart only. |
| Image | ecom-toast__img | 40×40px, alt="". |
| Text | ecom-toast__text, ecom-toast__name | The name is bold. |
| Footer | ecom-toast__footer | Blank and Primary buttons, 32px high. |
| Informational | ecom-toast__info-content, ecom-toast__info-text | Text and optional link. |
| Close | icon-btn icon-btn--close | Add icon-btn--close-inverted on Informational. |
Two variants: Add to cart and Informational. No status and no emphasis.
440px (Add to cart) or 375px (Informational) from 640px; the full width below.
| Property | Value |
|---|---|
| Slide in / out | var(--duration-medium-2) (300ms), var(--ease-decelerate-emphasized) in, var(--ease-accelerate-generic) out |
| Auto-hide | 4000ms (same as System Toast) |
| Position | Fixed. Top 40px / right 40px at 1024px+, 32px below, top and full width on mobile |
Compare other easing and duration values in the live Motion section on Examples & Guidelines.
| Input | Result |
|---|---|
| Click ×, click outside, wait | Exit animation, then removed. Auto-hide after 4 seconds. |
| Click a button or the link | Runs its action and closes the toast. |
| Tab | Buttons, link and × take focus with a visible ring. |
| Inline link | Informational: Inline Link, inverted (white). Underlined when enabled; on hover the underline goes and the color changes. |
| Topic | Requirement |
|---|---|
| Announcement | Announced politely through role="status" and aria-live="polite"; focus is not moved (WCAG 4.1.3). |
| Image | The product image is decorative: alt="". The name is in the text. |
| Focus | Buttons, link and × have a 2px ring, border-focus, on keyboard use (WCAG 2.4.7). |
| Contrast | White text on surface-100 in Informational. Link and × use the inverted tokens. |
| Reduced motion | No slide under prefers-reduced-motion: reduce. |