Toast (Snackbar)
/ role="status" · Toaster /
also called snackbar, status toast, in-app notification
A toast is a compact, non-modal status message that appears in a screen corner after an action and dismisses automatically. It confirms transient outcomes such as saving or copying without interrupting the workflow. Unlike a notification banner, it does not occupy a persistent place in the page layout or demand acknowledgement.
If you called it…
…you meant a toast (snackbar).
Anatomy — every part, named
- 1Toast viewport
Toaster“The corner where all the little messages stack” is the toast viewport.
- 2Status message
role="status"“The saved successfully text that appears by itself” is the toast's status message.
- 3Toast action
ToastAction“The Undo button inside the temporary message” is the toast action.
Prompt — paste into your agent
Show a Toast (Snackbar) through a role="status" live region after the action succeeds. Place it in a consistent corner without blocking the page, auto-dismiss only nonessential messages after a short delay, and pause that timer while the toast is hovered or contains keyboard focus.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my toast (aria-live region, sonner). Rule out: no aria-live region so screen readers never announce it; the auto-dismiss timer not pausing on hover/focus; stacked toasts overlapping instead of shifting; the exit animation racing the removal so it snaps; toasts rendering under modals because of z-index order. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| ARIA | role="status" | |
| shadcn/ui | Toaster | |
| Sonner | toast() | |
| ARIA | aria-live="polite" | announces non-urgent updates |