buttonsIntermediateanimation

Toast Stack

Slide-in toasts that stack and auto-dismiss on a timer.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a toast notification stack: a fixed bottom-right column where toasts slide in from the right (translateX(40px) → 0, 0.3s cubic-bezier ease-out), stack vertically, and auto-dismiss after 2.8s with a slide-out. Three kinds (info, success, error) each get a distinct accent border-left color (blue, green, red). Each toast has an icon, title, and body. Trigger by buttons that call a toast(kind) function.

Code

html

<div class="actions">
  <button data-kind="info">Info toast</button>
  <button data-kind="success">Success toast</button>
  <button data-kind="error">Error toast</button>
</div>
<ol class="toasts" aria-live="polite"></ol>