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.
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
Concise language
Single piece of info
Precision when relevant
Passive voice vs. active voice

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
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.
Resources
(internal only)