Toast
A toast is a brief, non-disruptive notification that appears on the screen (commonly at the top right corner) and automatically disappears after a short time. It’s used to inform the user about an event that has occurred (e.g., a successful action, an error, or a status update) without requiring their immediate attention or interaction. Unlike more intrusive alerts or dialogs, toasts are designed to be quick, minimal interruptions that let users keep their context.
Usage
Timely Feedback: Toasts appear immediately following an event, letting users know the outcome of their action.
Non-Blocking Notification: They don’t interrupt the user’s workflow; users can continue interacting with the interface even while a toast is visible.
Transient Messages: Toasts usually have a short duration (often 3–5 seconds), then fade away automatically.
Use cases
Confirming a user’s action (“Your message has been sent!”)
Showing a minor error (“Could not save. Please try again.”)
Brief status updates (“You’re now offline,” “Synced successfully”)
Not to be confused with
Snackbar: While often similar in function, snackbars typically appear at the bottom of the screen (especially in mobile or Material Design contexts), and may allow for an optional action. Toasts are typically placed at the top or top-right corner and rarely include interactive elements.
Banner: A banner spans the top (or bottom) width of a page and remains until dismissed or its condition changes, whereas a toast auto-dismisses after a few seconds and is smaller and less intrusive.
Modal/Dialog: A modal interrupts user activity and requires an explicit action to close, while a toast appears in the corner and does not block interaction.
Best practices
Clear & Concise Messaging
Use short sentences, focusing on the key outcome or instruction.
Avoid large paragraphs or multiple lines that might require extra reading time.
Appropriate Duration
Set a visibility timer that’s long enough for users to read the message (about 3–5 seconds), but short enough that it doesn’t linger and become intrusive.
Allow a manual close option or an extra-long duration for critical messages if needed.
Non-Blocking Interaction
Ensure toasts don’t obscure key elements (e.g., forms, buttons) and allow user clicks beneath them.
Keep them at a consistent corner or offset so they don’t jump around the screen.
Visual Consistency
Match the style (colors, typography, border radius) with other UI elements in your design system.
Use consistent formatting for success, error, and informational states (e.g., green for success, red for error).
Accessible & Screen Reader Friendly
Mark toast messages as aria-live="polite" or assertive (depending on urgency), so screen readers announce them without interrupting the user’s workflow.
Avoid excessive toast notifications that might overwhelm screen reader users.
Subtle Transitions
Use simple fade or slide-in animations so the toast arrival and dismissal feel natural.
Avoid overly elaborate animations that distract the user from their primary task.
Avoid Overlapping
If multiple toasts appear in quick succession, stack them with a clear order (e.g., newest on top).
Consider limiting the maximum number of visible toasts at once to prevent clutter.
Keep toast messages concise—only a sentence or two—so they can be read quickly before they disappear.
Summary
A toast delivers quick, transient feedback without disrupting a user’s flow. By appearing in the corner (often top right) and auto-dismissing after a set duration, it offers just-in-time notification about successes, errors, or status changes. Keeping the message brief, visually aligning with the design system, and ensuring accessibility are all key to making toasts an effective, minimal-interruption communication tool within your product’s interface.
