← All terms

Fig. 02 / Toast · In motion

Mobile UI Patterns

Toast

EXPLAINED SIMPLY:A toast is the small message that appears briefly on screen to confirm something happened, then disappears on its own without you touching anything.

A toast is the small message that appears briefly on screen to confirm something happened, then disappears on its own without you touching anything. Tap save and a little dark pill shows up near the bottom, says "Saved," and fades out a couple of seconds later.

The name is literal. It pops up, like bread from a toaster. Gmail shows one when you send an email, Instagram shows one when you copy a link, and every notes app on earth shows one when it autosaves. A toast never asks you for anything, and that is the entire point. Nothing dims, nothing blocks, and you keep working while it quietly confirms the thing worked.

Watch one closely and you can see the timer running out, a thin bar draining under the message before it fades. That self-destruct matters. If it waits around for you to dismiss it, it isn't a toast anymore.

You'll also hear "snackbar," Google's name for a toast that carries one small action, usually Undo. Gmail's "Message sent" with its Undo button is the famous one. People also say toast notification, toast message, or flash message. If someone in a meeting insists a snackbar is not a toast, the difference is one optional button, and you can safely move on.

The boundary sits at decisions. A toast is for confirmations nobody needs to act on, because it leaves before anyone can. "Are you sure you want to delete this?" belongs in a modal, which will hold the door until you answer. A toast only ever says "done."

When you want "tell the user it worked without interrupting them," ask for a toast. If you catch yourself wanting a button on it, ask for a snackbar.