Toast / Snackbar

You archive an email and a dark bar slides up from the bottom: “Conversation archived · Undo”. A few seconds later it’s gone. You didn’t have to tap anything, and you could keep working while it was there. That little bar is a toastToastA short, temporary message that appears briefly and disappears on its own, like 'Message sent'.Open in glossary →, called a snackbar in Material Design.

Toasts are small, but testers love them. They disappear on a timer, they appear on top of other things, they promise that something worked, and the Undo button has to really undo. Each of those is a place for bugs.

What is a toast?

A toast is a brief, non-blocking message that appears on top of the screen, confirms what just happened, and disappears automatically. Unlike a modalModalA window that appears on top of the page and blocks the content behind it until it is closed.Open in glossary →, it doesn’t stop the user. They can ignore it and carry on.

You’ll usually see one used to:

• Confirm an action: Link copied, Added to bag, Settings saved.
• Offer a quick way back: Conversation archived · Undo, Item removed · Undo.
• Report a small, temporary problem with a fix: Couldn’t send. Retry.

Anatomy

How it differs from similar components

Component	Blocks the user?	Disappears by itself?	Typical use
Toast / snackbar	No	Yes, after a few seconds	Feedback on an action, optional Undo
Banner (in-page)	No	No, until fixed or dismissed	Ongoing status: “You’re offline”, “Card expires soon”
Inline message	No	No	Form errors, next to the field that has the problem
Dialog / alert	Yes	No	Decisions and errors the user must deal with
Push notificationPush notificationA message an app sends to the device that appears even when the app is closed.Open in glossary →	No	Goes to the notification center	Messages from outside the app, even when it’s closed

Dev note

On Android, a Toast is a specific system component (plain text, no buttons) and a Snackbar is the Material component with an optional action. iOS has no native toast at all: apps use custom banners or HUDs. On the web, people say toast, notification, flash message or alert. In a bug report, describe what you saw (“the snackbar at the bottom”).

Designs & variants

Tap the buttons inside each screen. Watch how long each message stays, where it appears, and what you can do with it.

Share recipe

Copy link

Inbox

Archive top

• Lisbon trip itinerary
• Your order has shipped
• Team lunch on Friday?
• Invoice #1042
• Weekly running summary

Midnight Drive

Lumen · Album

Add to Library

Trail running shoes

€119.00 · Size 42

Add to bag

Settings

SaveFail

Chat with Ana

See you at 7 at the climbing gym!

Send offline

How long should it stay?

There’s no single number, but these are good rules to test against:

Situation	Typical duration
Android system Toast	2 s (LENGTH_SHORT) or 3.5 s (LENGTH_LONG), fixed by the system
Short confirmation, no action	About 4–6 s
With an action (Undo, Retry)	Longer, around 6–10 s, or until dismissed. Jetpack Compose’s Material 3 snackbar stays until dismissed by default when it has an action
Material snackbar presets	Material’s guidance is roughly 4–10 s. In Compose, SnackbarDuration.Short is 4 s and Long 10 s; the older View-based Snackbar uses much shorter presets (about 1.5 s and 2.75 s), so check which one the app uses
Error that needs the user	Don’t auto-hide at all, or don’t use a toast

The longer and more important the message, the longer it should stay. On the web, the timer should also pause while the pointer or keyboard focus is on the toast, so it doesn’t vanish under the cursor.

The Undo pattern

Undo is what makes toasts powerful: instead of asking “Are you sure?” in a dialog, the app does the action immediately and offers to reverse it. That’s faster for everyone, but it’s only safe if Undo really works. Testers check:

When to use it

A toast is a good choice when:

• The message is short (one line, two at most) and confirms something the user just did.
• The user doesn’t need to do anything. If they miss it, nothing bad happens.
• There is at most one simple action, like Undo or Retry.
• The action was reversible or already succeeded.

Good and bad uses

Common bugs

#	Bug	What you see	Typical severity
1	Undo doesn’t undo	Item doesn’t come back, the wrong item comes back, or it reappears after refresh	High
2	Too fast	Disappears before you can read it or reach Undo	Medium
3	Success after failure	“Saved” even though the request failed (500 or offline in the network log)	High
4	Endless stacking	Many toasts pile up and cover the screen	Medium
5	Covers important UI	On top of the bottom navigation, the FAB, “Checkout” or the keyboard	Medium
6	Truncated text	Message or action cut off in other languages or with large text	Medium
7	Timer never pauses (web)	The toast disappears while your mouse is on its button	Low–Medium
8	Screen reader silence	VoiceOver / TalkBack doesn’t announce it	High (for affected users)
9	Shows on the wrong screen	You navigate away and the toast follows, or appears after you return	Low
10	Can’t be dismissed	No close button on a long or persistent toast; it blocks content	Low–Medium

Try it: toast timing lab

Set the duration to 2 seconds and try to press Undo. Turn off pause-on-hover and hover a toast. Pick Unlimited stacking and press Add 5 quickly. Turn off the live region and see what a screen reader user would get.

🧪 Toast timing lab

Change the settings, then add items to the wishlist. Try to press Undo in time, hover a toast, and spam the button.

Duration: 6 s

Position

Top rightTopBottom

Stacking

ReplaceMax 3Unlimited

Undo actionPause on hover / focusAnnounce (live region)

Peak Outdoor Wishlist (0)

Trail running shoes

€119.00

Add to wishlistAdd 5 quickly

Problems with these settings

Sensible settings. Now set the duration to 2 s and try to press Undo.

Screen reader would say

• Add something to the wishlist…

Find the bug

This mail app archives emails with a snackbar and Undo. It has six bugs. Explore it like a tester:

• Archive one email, then two in a row, and use Undo.
• Watch how long the snackbar stays and where it appears.
• Turn on Poor connection, archive, then refresh (the button next to the search bar).
• Turn on Large text.

🐞 Bug hunt: Mail inbox

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Search in mail

Primary

• TTAP Air PortugalYour Lisbon trip itinerary
• PPeak OutdoorYour order has shipped
• AAna SilvaTeam lunch on Friday?
• CCityBankYour October statement
• RRunClubWeekly running summary
• FFoodly20% off sushi tonight

Compose

Device settings

Restart app

Poor connectionLarge text

Network log

• Archive an email to see API requests…

1. 1

   Hint: Archive one email, wait, archive another, then press Undo.

   Undo restores the wrong email

   Undo brings back the first email you archived in the session, not the one the snackbar was about. The email you just archived stays archived. Expected: Undo restores exactly the item from that snackbar.

   Reveal answer✓ I found this
2. 2

   Hint: Count how long the snackbar stays.

   Snackbar disappears after 2 seconds

   It vanishes after about 2 s. That's barely enough to read it, and not enough to reach Undo, especially with a screen reader. Expected: at least 4 s, and longer (or until dismissed) when there is an action.

   Reveal answer✓ I found this
3. 3

   Hint: Archive three emails quickly.

   Snackbars stack on top of each other

   Every archive adds another snackbar above the last one, covering the inbox and the Compose button. Material snackbars appear one at a time: a new one replaces the previous one.

   Reveal answer✓ I found this
4. 4

   Hint: Look at what is under the snackbar.

   Snackbar covers the bottom navigation

   The snackbar is drawn over the navigation bar, so Mail, Chat, Meet and Starred are hidden and can't be tapped. The Compose button doesn't move up either. Expected: the snackbar sits above the navigation bar and the FAB moves out of its way.

   Reveal answer✓ I found this
5. 5

   Hint: Turn on Poor connection, archive an email, check the network log, then refresh.

   Success message although the request failed

   The API returns 500, but the app still says “Conversation archived” and removes the email. After a refresh it is back in the inbox. Expected: roll back and show an error such as “Couldn’t archive. Retry”.

   Reveal answer✓ I found this
6. 6

   Hint: Turn on Large text and archive an email.

   Message is clipped with large text

   The message is cut off mid-word (“Conversation arch…” without even an ellipsis). Expected: the text wraps to a second line (the action can move below it), so the whole message is readable.

   Reveal answer✓ I found this

How to test it

Checklist

Toast / snackbar test checklist

0 of 12 checked

Copy

• The message is short, specific and matches what actually happened
• Success is only shown after the server confirmed it; failures show an error instead
• It stays long enough to read (4 s or more) and longer when it has an action
• Undo restores exactly the right item, also after several actions in a row and after a refresh
• Only one snackbar at a time (or a small, limited stack on web)
• It does not cover the bottom navigation, FAB, keyboard or primary buttons
• Text is not truncated in long languages or at the largest text size
• Web: the timer pauses on hover and keyboard focus, and there is a close button
• Screen readers announce it (role="status" / aria-live="polite"); errors use role="alert"
• The action button can be reached with a keyboard and a screen reader before it disappears
• It does not follow the user to another screen or reappear later
• Critical errors are not shown only in a toast

Example test cases

Accessibility

• Announce it. Screen readers don’t notice text that just appears (WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary → 4.1.3 Status Messages, Level AA). Native Android Snackbars and Toasts are announced by TalkBack; custom iOS banners need an announcement.
  Dev note

  On the web, put toasts inside a container with role="status" (or aria-live="polite") that already exists in the page before the message is added. Use role="alert" only for urgent errors. On iOS: UIAccessibility.post(notification: .announcement, ...).
• Don’t steal focus. A toast should be announced, not focused: moving focus would interrupt what the user was doing.
• Give enough time. WCAG 2.2.1 (Timing Adjustable) asks that users can turn off, adjust or extend time limits. For toasts that means a long enough duration, pausing on hover and focus, and never putting the only copy of important information in one. Android also has a system setting (“Time to take action”) that apps should respect.
• Make the action reachable. Keyboard users must be able to reach Undo before it disappears. Some apps offer an alternative, like a keyboard shortcut or an Undo item in a menu.
• Contrast. Message text needs 4.5:1 against the toast background, and the action button color too. Check in light and dark modeDark modeA display setting that uses light text on dark backgrounds.Open in glossary →.
• Don’t rely on color alone for success vs error: add an icon and clear words.
• Large text. At the biggest Dynamic TypeDynamic TypeThe phone setting that lets users make text bigger or smaller across apps.Open in glossary → or font scale, text must wrap, not clip, and the action must stay visible.

Mobile vs web

iOSAndroidWeb

• No native toast. Apps build their own: top banners that look like notifications, centered HUDs, or Material-style bars from a library. Quality varies a lot.
• Check placement against the notch / Dynamic Island, the home indicator and the tab bar.
• Custom components often forget VoiceOver announcements and Dynamic Type.
• Swipe-to-dismiss (usually up for top banners) should work and must not trigger the system notification center.

• Toast: system pill, text only, 2 s or 3.5 s, no actions. Since Android 11, apps in the background can’t show custom-view toasts, and Android 12+ limits toast text to two lines and shows the app icon.
• Snackbar: Material component with one optional action. One at a time, above the bottom navigation, pushes the FAB up.
• Test with TalkBack, maximum font size, gesture navigation vs 3-button navigation, and with the keyboard open.
• Rotate while a snackbar is visible: it should not duplicate or reappear.

• Usually from a library (or hand-made). Common positions: top right, top center, bottom center. Check the position on small screens too.
• Check the live region in DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary → (Elements panel: role="status" / aria-live), and test with a screen reader.
• Check pause on hover/focus, the close button, and stacking limits.
• Check that a toast doesn’t survive a page navigation it shouldn’t, and that “Saved” matches the real APIAPIThe way different software parts talk to each other, like an app asking a server for data.Open in glossary → response in the Network tab.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.Which message fits a toast best?

   A"Your card was declined"B"Link copied"C"Your session will expire, save your work"D"Enter a valid email address"

2. 2.You archive two emails and press Undo on the latest snackbar. The first email comes back instead. What kind of bug is this?

   AA truncation bugBA functional bug in UndoCA performance bugDNot a bug

3. 3.The app shows "Saved" but the network log shows a 500 error. What should happen instead?

   AShow "Saved" anyway, it will retry laterBShow nothingCRoll back and show an error with a way to retryDClose the app

4. 4.How should a web toast be announced to screen readers?

   ABy moving focus to itBWith role="status" / aria-live="polite" on a container that is already in the pageCWith a title attributeDScreen readers can't read toasts

5. 5.Which iOS statement is true?

   AiOS has a native Toast like AndroidBiOS has no native toast; apps build banners or HUDs themselvesCiOS only shows push notificationsDiOS snackbars always have an Undo action

Key takeaways

• A toast is a short, non-blocking message that disappears on its own. Use it for confirmations and easy Undo, never for errors the user must act on or critical information.
• Android has a Toast (text only) and the Material Snackbar (one action). iOS has no native toast. On the web, toasts usually stack in a corner.
• Timing matters: 4 s or more, longer with an action, and on the web pause on hover and focus.
• Test Undo hard: the right item, several in a row, and after a refresh.
• Classic bugs: success shown after a failure, endless stacking, covering navigation, truncated text and screen reader silence (role="status").