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
Toast-DoDont-When-Do
Don’t
Toast-DoDont-When-Dont

 

Content

  • 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
  • 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
Toast-DoDont-NonCritical-Do
Don’t
Toast-DoDont-NonCritical-Dont

 

Concise language

Do
Toast-DoDont-Concise-Do
Don’t
Toast-DoDont-Concise-Dont

 

Single piece of info

Do
Toast-DoDont-SingleInfo-Do
Don’t
Toast-DoDont-SingleInfo-Dont

 

Precision when relevant

Do
Toast-DoDont-Precision-Do
Don’t
Toast-DoDont-Precision-Dont

 

Passive voice vs. active voice

Toast-DoDont-PassivevActive

 

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.
Toast-Example-Type-Success
Toast-Example-Type-Error

 

Placement

Desktop

Bottom center, excluding left nav or side panels

Toast-Example-Placement-Desktop

 

Native App

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

Toast-Example-Placement-NA

 

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
Toast-DoDont-Actions-Do
Don’t
Toast-DoDont-Actions-Dont

 

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.

 

Duration

  • No action: 7 seconds
  • With action: the toast persists until one of the following occurs:
    • Another toast appears
    • The user clicks/taps on the action within the toast
    • The user exits/refreshes the page
    • The user dismisses the toast
    • If the action expires, ex: un-sending an email

 

Frequency

Only 1 toast on screen at one time.

 

Priority

Use toasts for low priority messages. For higher priority messages, use a banner or modal.

Do
Toast-DoDont-Priority-Do
Don’t
Toast-DoDont-Priority-Dont

 

Resources

(internal only)

Figma

Storybook

Enhancements