A toast is short-lived feedback on something the user just did: saved, copied, failed. It slides in, says its piece and leaves without blocking the page.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from System Toast.
Resolved from the live token package.
| Status · emphasis | Part | Token | Value |
|---|
| Property | Value |
|---|---|
| Width | 375px from 640px. Below 640px the full viewport width. |
| Padding | 16px, with 8px between icon and text |
| Left edge | 2px solid, status color |
| Shadow | var(--shadow-elevation-b-80) |
| Actionable footer | Indent 32px, 16px above the buttons, buttons 32px high, Primary fills the rest of the row. Or inline links, 16px gap between them. Buttons and links are alternatives. |
| Z-index | 9999 |
The toast is position: fixed and always enters from the right, except on mobile where it enters from the top.
| Breakpoint | Top | Right | Width | Enters from |
|---|---|---|---|---|
| lg (1024px+) | 40px | 40px | 375px | The right |
| md (769–1023px) | 32px | 32px | 375px | The right |
| sm (640–768px) | 32px | 32px | 375px | The right |
| xs (0–639px) | 0 | 0 (left 0) | Full viewport width | The top |
The padding of the toast. The shaded area is the padding; the 2px status edge sits outside it. The numbers are read from the component. A toast is the same at every breakpoint.
| Attribute | Value |
|---|---|
| Padding | 16px on every side |
| Left edge | 2px, outside the padding |
| Gap icon to text | 8px |
| Gap between title and text | 2px |
| Close | 24px box, 20px icon, 2px padding |
The same distances as spacing tokens.
| Part | Value |
|---|---|
| Padding | space-16 |
| Icon to text | space-8 |
| Title to text | space-2 |
| Left edge | space-2 |
| Actions indent | space-32 |
| Text to actions | space-16 |
| Between buttons | space-8 |
| Between links | space-8 row, space-16 column |
| Part | Token | Value |
|---|---|---|
| Toast | shadow-elevation-b-80 | The highest bottom shadow: the toast floats above everything except a modal. |
Every status in both emphasis levels. A toast has no hover or disabled state of its own: the ×, the buttons and the links have. Its lifecycle (enter, visible, exit) is under Motion.
| Status | Strong | Weak |
|---|
| Element | Token | Mobile and tablet | Desktop (769px+) |
|---|---|---|---|
| Title (optional) | title-sm | 16/18, bold | 16/18, bold |
| Text | body-md | 16/22, 0.32px | 17/24, 0.32px |
| Buttons | label-md / label-sm | 14/14, 0.42px | 14/14, 0.56px |
| Inline link | body-md | 16/22 | 17/24 |
| Element | Class | Notes |
|---|---|---|
| Toast | toast toast--{status} toast--{emphasis} | Status: info, success, warning, error. Emphasis: strong, weak. |
| Content | toast__inner, toast__row, toast__body | Padding, edge and the icon / text / × row. |
| Icon, title, text | toast__icon, toast__title, toast__text | The icon is a material-symbols-outlined span. |
| Close | icon-btn icon-btn--close | Blank icon button, aria-label="Close". |
| Actions | toast__actions with toast__btns or toast__links | Buttons or inline links. |
| Position | toast-host | Added by ECO_N.showToast; fixed, role="status". |
Eight combinations: four statuses × Strong and Weak, each Default or Actionable.
375px from 640px, the full width below. Never wider than the window.
| Motion | Value |
|---|---|
| Duration | var(--duration-medium-2) (300ms) enter and exit; no fade, the toast only slides |
| Enter easing | var(--ease-decelerate-emphasized) (cubic-bezier(0.16, 0, 0.16, 1)) |
| Exit easing | var(--ease-accelerate-generic) (cubic-bezier(0.36, 0.09, 1, 0.58)) |
| Auto-hide | 4000ms for System Toast |
| Reduced motion | The toast appears and leaves without sliding |
Compare other easing and duration values in the live Motion section on Examples & Guidelines.
| Input | Result |
|---|---|
| Click × | Runs the exit animation, then removes the toast. |
| Click outside | Same. The listener starts on the next tick so the click that opened the toast does not close it. |
| Wait | Auto-hide after 4 seconds (Success and Informational). Warning and Error stay until dismissed. |
| Tab | The × and any button or link take focus with a visible ring. |
| Inline link | Underlined when enabled; on hover the underline goes and the color changes (eco-inline-link, Medium). |
| Second toast | Replaces the first one at once. Only one toast is on screen. |
| Topic | Requirement |
|---|---|
| Announcement | The toast area is role="status" with aria-live="polite", so new toasts are announced without moving focus (WCAG 4.1.3). |
| Status | The icon and the text carry the status, not the color alone (WCAG 1.4.1). |
| Focus | The ×, buttons and links have a 2px ring, border-focus, on keyboard use (WCAG 2.4.7). |
| Timing | Success and Informational leave after 4 seconds; Warning and Error stay until dismissed. Anything the user must act on does not auto-hide (WCAG 2.2.1). |
| Reduced motion | No slide under prefers-reduced-motion: reduce. |