Toast Notifications

Toast notifications are transient, non-modal messages appearing briefly to confirm actions or surface information without interrupting workflow.

stellae.design

Design Principles

Toasts (snackbars in Material Design) appear at screen edges, persist a few seconds, and auto-dismiss. Ideal for confirming actions ('File saved'), non-critical info ('New version'), and undo opportunities. Should never contain critical info or require interaction. Sweet spot between no feedback and disruptive modals.

Why It Matters

Toast notifications provide lightweight, transient feedback that confirms an action was completed without interrupting the user's workflow. They occupy a sweet spot between no feedback at all and modal dialogs that demand attention. Getting toasts right means users always know what happened without losing their place or focus.

Real-World Examples

Email sent confirmation with undo

After sending an email, a toast appears at the bottom of the screen reading 'Message sent' with an 'Undo' link. The toast persists for 6 seconds, giving the user time to retract the send if needed. After the timer expires, the toast slides away and the send becomes permanent.

File upload success toast

When a file upload completes, a toast briefly confirms 'Invoice.pdf uploaded successfully' and fades out after 4 seconds. The toast includes a subtle checkmark icon reinforcing the success state. No user action is required, and the workflow continues uninterrupted.

Counter-example

Error message displayed as auto-dismissing toast

A payment form shows a 'Card declined' error as a toast that auto-dismisses after 3 seconds. The user looks away momentarily and misses the message, then has no idea why their payment did not go through. Error messages that require user action should persist until explicitly dismissed or be displayed inline near the relevant field.

Role-Specific Guidance

Common Mistakes

• Using auto-dismissing toasts for error messages or critical information is a common failure — users may not see a message that vanishes in a few seconds, especially if they have a screen reader or are not looking at the notification area. Another mistake is stacking multiple toasts simultaneously, which overwhelms users and buries the most recent message. Placing toasts over interactive elements like form submit buttons creates accidental clicks and frustration.