Stacked Toasts in Angular 22: Swipe-to-Dismiss, Hover Pause, and a 15-Second Demo

Base UI (Angular) — base-ui.net ships ToastService as a free copy-in component (npx base-ui-cli add toast). Multiple toasts stack like a deck: newest in front, hover or Tab expands, swipe dismisses, and hover pauses the timer. Live demo: /base-elements/toast/.

The clip above is a 15-second capture of that page. The HUD shows the same inputs a real user has: CLICK to stack four, HOVER to expand, TAB onto the dismiss control, SWIPE → to throw the front card off the right edge.

---

Why toasts fail when they only vanish

Transient corner messages are easy to ship and easy to get wrong. HPE's design system tells authors a toast must be readable in about 8 seconds before auto-close (HPE Design System). Jakob Nielsen is blunter about the anxiety that creates: "when toasts are used for information that users care about, it introduces anxiety to have to rush to read it before it vanishes" (Nielsen, 2024).

WCAG 2.2 Success Criterion 2.2.1 Timing Adjustable (Level A) requires a way to turn off, adjust, or extend a time limit (W3C). Pausing the countdown on hover or focus is the toast-sized version of that rule. Success Criterion 2.2.2 Pause, Stop, Hide applies to auto-updating content (W3C). None of that makes a catalog "WCAG compliant" — it is why the timers live in the overlay and freeze while the pointer or keyboard is in the stack.

---

What the 15-second demo is doing

prefers-reduced-motion: reduce skips the scale, peek, and swipe tween and renders a static list instead (MDN). Try that in the OS motion setting, then reload the live demo.

---

The public API did not change

Call sites stay imperative. The overlay is created with Angular createComponent against the DOCUMENT token — do not put base-toast-container in a template.

this.toast.show('File deleted', {
  color: 'danger',
  action: { label: 'Undo', onClick: () => restore() },
});

this.toast.success('Tests passed');

await this.toast.promise(save(), {
  loading: 'Saving…',
  success: 'Saved',
  error: 'Failed',
});

Informational toasts use role="status". Danger and warning use role="alert". The host is an aria-live region so a screen reader can hear the message without a focus steal (W3C ARIA live regions). Overflow cards behind the deck are inert until the stack expands.

Position is one of top-right, top-left, top-center, bottom-right, bottom-left, bottom-center. Duration defaults to 4000ms; duration: 0 keeps the toast until dismiss. Tailwind v4 tokens on the copied template are yours to edit (Tailwind CSS).

---

Copy-in install

Toast is free. The CLI writes the TypeScript, HTML, and spec into your repo:

npx base-ui-cli add toast

That is the same copy-in path as the rest of the catalog — no extra runtime UI package in node_modules, and the overlay skips DOM work on the server so prerender stays clean.

Live demo: base-ui.net/base-elements/toast/.