Toast (Deprecated)

Overview

Toast messages provide users with short messages about an action they’ve just performed.

Other names: Snackbar, Toast Notification, Pop-ups

Behaviors

Duration

Toasts should appear for at least 6-8 seconds. This is an accessibility standard to make sure the user has enough time to read the content.

There is a progress indicator at the top of the toast that lasts 8 seconds. It stops counting down when the toast is paused, then starts again on resume.

Pause/resume

Toasts have a notification options bar and a Pause/Resume feature that allows users to pause toasts if they do require more time to read the content.

Multiple toasts

If there’s already a visible toast message a newly triggered toast will appear below it.

Actions and dismiss

All toasts have a text link labeled Dismiss that removes the toast message. Toasts can also contain another optional action to the left of the Dismiss text link that takes the user to other content. If the toast contains critical information, you might want to choose a different label that asks the user to acknowledge the message. Try Got It or I Understand.

Dismiss all

Users can dismiss all toast notifications by selecting Dismiss All from the notifications options bar.

This option is located to the right of Pause and Resume.

Focus

When the toast’s text links are focused on, an outline replaces the browser default focus state for links.

Animation

Toast messages appear and are dismissed with an animation lasting 250ms as mentioned in the motion guidelines.

Variations

Informational

Informational toasts are only for relatively low priority messaging. Nothing has failed or succeeded, but something neutral has occurred which the user should be made aware of.

Success

Success toasts inform the user of successful or positive actions within the system.

Warning

Warning toasts pre-emptively inform the user of potentially dangerous or destructive actions. They can also indicate relatively important details about system outages or temporary or reduced functionality. The warning icon uses different colors than the rest of the light mode toasts in order to meet accessibility requirements.

Error

Error toasts inform a user that the action they attempted to perform encountered a problem.

Usage guidelines

General

Do:

• Use toasts for submissions of an entire form.
• Use toasts for events that occur “behind the scenes.”

Don't:

Use toasts when a user completes individual fields on a form.

👍

Try this

• Form submitted
• Copied to clipboard

❗️

Not this

• Tenant ID entered successfully
• Field validated

Content guidelines

Toast messages should be brief, while still providing context to the user. The content in a toast message should be informative, relevant, and timely. Aim for 15 words or fewer.

Informational messages should be specific when possible and provide instruction.

👍

Try this

You didn’t make any changes, so nothing new needs to be saved.

❗️

Not this

No action needed.

Success toast messages should help provide certainty. They typically don’t need to contain the word success or successfully — it’s redundant. Again, be specific when possible. Try to speak directly to the user in first person and using the active voice.

👍

Try this

• 10 users added to "Halifax Office."
• Invitation sent to [email protected].
• You saved changes to "Halifax Office."

❗️

Not this

• Success! 10 users added to the group successfully.
• Invitation was successfully emailed to the user.
• Changes were successfully saved.

Warning messages should inform the user about what impact the warning will have on them, or any action they can take.

👍

Try this

An outage is planned for April 6 at 3pm EST.

❗️

Not this

A planned outage is scheduled.

Error toast messages can explain what happened, without using error code or jargon.

👍

Try this

Group could not be created. Name already exists.

❗️

Not this

Error. Could not validate group name field.

Use toast messages to confirm when something is deleted or discarded. Even though they are confirming a successful action, the tone should not be celebratory. No need to say “success”.

👍

Try this

• You discarded all changes.
• “Halifax Office” deleted.

❗️

Not this

• Success! Discard complete.
• Group was successfully deleted!

Positioning

The list of toast messages starts in the top right of the page, just below the header. The list expands downward, with the newest message appearing below the last but aligned in a vertical list.

Longer toast messages wrap onto multiple lines. The Dismiss button, icon, and any other links should align with the top line of the text.

Icons

Toasts have a corresponding icon to the left of the message that indicates what type of message it is, like the checkmark for success. Don’t use other icons.

Toasts or banners

Toasts are immediate reactions to a user action. Banners display messages that are often a summary or notification information generated by the system on a page load or refresh.

Related

Referenced in this section:

Colors guidelines

Icon component

Motion guidelines

Text link component

Typography guidelines