Toast

Toasts display brief, temporary notifications that are non critical, as it may happen that they aren’t read. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.

Overview

When to use

To confirm whether a simple action the user just took succeeded or failed, e.g.: sending a message, saving a file, etc. They should not be used for every action, but is at the designer discretion as far as when to implement a toast.

Do

Do use them to convey software states

Don’t

Don’t use them for marketing

Content

Generally speaking, use {noun} + {verb} combo. E.g.: Shift added

If it adds relevant precision, add a single noun or adjective. E.g.: Catherine’s details updated; contact details imported

However if the message first showed the action in progress, just say “Done” once the action is completed.

E.g.: “Combining shifts” —> “Done”

Limit to 2-3 words when possible. Do no exceed 30 characters (5-6 words) or go over 2 lines. If the message cannot be shortened any further, consider choosing a different pattern than toast.

Never end in punctuation

Avoid unnecessary words and articles in the toast content, such as “the”, “your”, “their”, “an” or “a”. Avoid “we” or “we’ve” as long as the phrase still makes sense.

Non-critical info

Do

Do use them to say non critical information

Don’t

Don’t use them to transmit critical info that the user needs to act on. Instead, use a banner.

Concise language

Do

Do limit to 2-3 words when possible

Don’t

Don’t use extra words

Single piece of info

Do

Do relay a single piece of info

Don’t

Don’t relay several things at once

Precision when relevant

Do

Do add a noun or an adjective for extra precision (like a name, or ‘personal’) when not having it there would make the content vague

Don’t

Don’t add extra words that don’t add value: any shift added is always new, and you can’t do something unsuccessfully.

Passive voice vs. active voice

Show progression

Types

Choose according to how the toast’s information matches what the user just did:

Success: when an action is successful

Error: when an action fails. Avoid unless absolutely necessary. Instead, use a banner.

Placement

Desktop

Bottom center, excluding left nav or side panels

Native App

Bottom center, just above the navigation. If a CTA or floating action button exists, the toast appears above them.

Best practices

Accessibility

Toasts are complicated from an accessibility perspective. While they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.

Actions (optional)

Any action appearing on the toast should also be accessible elsewhere on the screen (with the exception of ‘undo’).

A toast may contain a single action

Use one word, a verb

Always pair with dismiss icon

Do

Do use a single one-word button

Don’t

Don’t use more than two words or two buttons

Animation

The toast comes from the bottom of the screen, easing-in in 500ms. After the duration of 7 seconds, the toast eases back down in 500ms. Watch this gif to see animation in action.