Library / UI components / Toast
No. 002·noun·also called snackbar, notification, flash message

Toast

A small message that pops up, says one thing, and leaves on its own.

SPECIMEN · LIVE DEMO
Definition

What it is

A toast is a brief notice that slides in, usually near the bottom or a corner, confirms something happened, and disappears after a few seconds. It never blocks what you were doing.

Use toasts for quick feedback on an action: "Saved", "Link copied", "Message sent". They can carry one small action, like Undo. Anything the person must read or decide on belongs somewhere more permanent.

A toast is not a modal (which blocks the screen) and not a banner (which stays at the top until dismissed).

Say it like a builder

How to ask for it

Vague

“Can you make it so when I save something, it tells me it worked?”

Precise

“After a successful save, show a toast in the bottom-right that says "Changes saved" and auto-dismisses after 3 seconds. If the save fails, show an error toast that stays until the user closes it.”

Why it works

"Tells me it worked" could mean a page reload, a modal, or text in the form; "toast" names a small, temporary notice and the prompt sets where and how long.

In the wild

You've seen this in

  • TThe "Message sent · Undo" bar at the bottom of Gmail
  • GGoogle Docs' "Link copied" notice
  • SSlack's "Reminder set" confirmation
Usage note

Often confused with

ModalA modal stops you until you respond; a toast informs and gets out of the way.BadgeA badge is a small counter stuck to an icon; a toast is a temporary message.