What is Toast notification?

A toast, also called a snackbar, is a small card that slides in near a corner of the screen, says something like "Invoice sent" or "3 files uploaded", and disappears after a few seconds. It does not block the page or take focus, so the user can keep working. Toasts are for feedback about something that just happened, especially work that finished in the background, and for short-lived offers such as Undo.

When to use it

• Confirming an action whose result is not otherwise visible, such as sending, copying or saving in the background.
• Offering Undo after a reversible action, which is often better than a confirmation dialog.
• Reporting a failure of a background task, with a retry action.
• Not for form validation errors, which belong next to the field, or for critical information the user must act on. Use an inline alert, a banner or a modal dialog for those.

Accessibility

Toasts are read by screen readers through live regions. The container must already be in the DOM before a message is inserted, or the announcement is often missed; that is why toast libraries mount a single toaster at the root of the app. Use role="status" (polite) for confirmations and reserve role="alert" (assertive) for errors, because assertive messages interrupt whatever the user is hearing.

• Do not move focus to a toast. It would pull keyboard users away from their task.
• Timing: WCAG 2.2.1 requires that users can extend time limits. Pause the dismiss timer while the toast is hovered or focused, and give messages with actions more time.
• Any action in a toast, such as Undo, must be reachable by keyboard and should also be possible elsewhere, since the toast will disappear.
• Stack toasts rather than replacing one with another, and cap how many are visible.

How to build one in React

Mount the toaster once in your root layout, then call the imperative API from anywhere:

// app/layout.tsx
import { Toaster } from "@/components/ui/toast"
// ...inside <body>: {children}<Toaster />

// anywhere in a client component
import { toast } from "@/components/ui/toast"

toast.success("Invoice sent", { description: "Acme will receive it in a minute." })

toast.promise(saveDraft(), {
  loading: "Saving draft",
  success: "Draft saved",
  error: "Could not save the draft",
})

MiniDev's Toast stacks messages, fans them out on hover or focus, pauses timers while expanded, and uses role="alert" only for the danger tone. Toasts pair well with optimistic UI, where a toast explains a rollback. More status patterns are in the feedback category.