What is Snackbar?

A snackbar is Material Design's name for a short message that slides up from the bottom edge, stays for a few seconds and goes away on its own. It confirms something that just happened, "Email archived" or "Connection restored", and can carry one text action, usually Undo or Retry. In everyday use the word is interchangeable with toast; the difference is mostly where it comes from. Toast is the older, more general term, and a snackbar is a toast with Material's specific rules: bottom of the screen, one at a time, at most one action.

Snackbar or toast

• Position: snackbars sit at the bottom, centered or at the leading edge; toasts commonly stack in a top or bottom corner.
• Stacking: Material shows one snackbar at a time and queues the rest; toast libraries often stack several.
• Actions: a snackbar has at most one action; toasts frequently include a close button.
• Timing: both dismiss themselves after about four to ten seconds, longer when there is an action.

On a phone, a bottom snackbar is within the thumb's reach and clear of the top bar, which is why mobile-first products prefer it. On desktop, a corner toast stays out of the way of a wide content area. Pick one position for the whole product.

Accessibility

Snackbars are read through a live region. The container must exist in the DOM before the first message so screen readers notice the change, which is why one toaster is mounted at the root of the app. Confirmations use role="status"; only errors that need attention use role="alert". Focus never moves to a snackbar, because the user is still working. The action in a snackbar must be reachable by keyboard before the timer runs out, so pause the timer while the snackbar is hovered or focused, and offer the same action somewhere persistent, since the snackbar will vanish. WCAG 2.2.1 asks that time limits can be extended, which these rules satisfy.

How to build one in React

MiniDev's Toast system works as a snackbar: mount one Toaster in the root layout, then call toast() from anywhere with an optional action:

"use client"
import { toast } from "@/components/ui/toast"

export async function archiveEmail(id: string, setArchived: (id: string, on: boolean) => Promise<void>) {
  await setArchived(id, true)
  toast("Email archived", {
    description: "You can find it in the Archive folder.",
    duration: 8000,
    action: { label: "Undo", onClick: () => setArchived(id, false) },
  })
}

Messages stack, fan out on hover or focus, and pause their timers while expanded. Keep the text to one line, name the thing that changed, and leave form validation and persistent warnings to an inline alert or a banner. Undo in a snackbar pairs naturally with optimistic UI, where the change already happened on screen. The Next.js toast notifications guide covers the full setup.