Toast

Toast is a temporary alert that is triggered by a user action.

Overview

Toast is one of three types of notifications available. Toasts provide transient, non-disruptive feedback on the outcome of an action.

Anatomy

1. Title: Text that explains the purpose of the alert.
2. Icon: Represents the severity of the notification supported by color.
3. Close button (optional): An affordance can be included to dismiss a toast.
4. Action (optional): Non-dismissable toasts can include a link that will let the user address the notification.

Demo

Open the component in Figma.

When to use

Use toasts for these scenarios:

• For transient feedback based on user action.
• For non-critical actions.
• To immediately confirm a user action.

When not to use

Use another type of notification for scenarios when you need information to be displayed that may not be based on a user action, or needs to be displayed for longer, or in a different location.

Use a callout instead:

• When you need an alert to remain until an issue is fixed.
• When you need the alert to be in context of a specific area.

Use a banner instead:

• When you have system-wide informational, warning, or error messages that require user attention.
• When you need a notification displayed according to the system settings (this could be a single view, a time period, or until an action is completed).

Similar components

Behaviors

Overflow

Toasts are dismissive by default, so the title should be a maximum of five words.

If a longer message is needed, use the non-dismissive variant and include a link to take users to a dialog or a new page with the rest of the information.

Placement

Toasts display only at the bottom right of the screen or page.

Motion

Toasts slide up from the bottom of the page and slide down once dismissed. If multiple toasts are visible at once, they will stack on top of each other with the most recent one being the bottom-most toast.

Size

The width of the toast is fixed, but the height will adapt to its content.

Dismissal

By default, a toast disappears without requiring user input. Any crucial information included in it should also be available somewhere else in the page.

When using the non-dismissive variant, the toast remains until dismissed by the user.

Severity

The toast color and icon indicate the severity of the message.

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for alert.

Content guidelines

Toasts should be clear and concise so users can quickly understand what happened and what their next steps are, if any. The following recommendations help keep your toast messages simple and straightforward.

Title

• Use five words or less.
• If a longer message is needed for an informational toast, write in a short sentence in the pattern of subject + verb + optional additional information.
• Toasts should have a neutral, instructive tone.
• Write in sentence case (capitalize the first word and proper nouns only).
• Avoid end punctuation.

Action

• Only include an action in a toast if it’s also available elsewhere on the page.
• Tell users where the link will take them.
• Keep link text concise. Use ither a single verb or verb + noun.
• Don’t use a link to dismiss a toast, use close [X].

Content accessibility

Avoid using a toast for critical information that users need to act on immediately. Toasts might be difficult for users with low vision or low dexterity to access because they:

• Can disappear automatically
• Can’t be easily accessed with the keyboard
• Might appear outside of the user’s current focus.

Make sure that users can also accomplish the action in the toast another way, since the toast action may be difficult to access for some users.

Colors

• Color only supports toasts' messages because it’s not conveyed by assistive technologies.
• Toasts use colors to provide consistent semantic meaning and communicate a level of visual importance for users. Each is designed to meet contrast requirements for accessibility. Don’t change colors or text colors.

Title

• Use appropriate vocabulary and tone to clearly explain the severity of the toast for users who can’t recognize certain colors.
• No additional content is needed for accessibility tags or labels.
  When the component is dynamically displayed, the content is automatically announced by most screen readers.

Figma: Toast