Back to components

Toast

Toasts display brief, temporary notifications. They are meant to be noticed without disrupting a user's experience or requiring an action to be taken.

Table of Contents

Edit this section, Opens in new window

Variations

Type Purpose
Info toast A neutral message
Success toast A successful message
Warning toast A warning message
Error toast An error message
Edit this section, Opens in new window

Usage

Principles

Toast or dialog?

Toasts should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience. Dialogs are ideal when a situation requires the user's attention, either for displaying important information or prompting for a response.

File uploaded

Placement

The toast position is always bottom center of screen.

Don't display more than one action

Actionable toasts should only have one button.

File archived
File archived

Don't include a redundant action

Actionable toasts should not have a button with a redundant action. For example, “dismiss” would be redundant because all toasts already have a close button.

Copied to clipboard

Multiple toasts

Max two toasts can be present at all times. If two toasts are present, and a new one is presented, remove the oldest toast.

Claim created
File uploaded
Email sent
Copied to clipboard
Copied to clipboard
Email sent
Edit this section, Opens in new window

Behaviours

Modifiers

Info (default)

Info message
Info message

Success

Success message
Success message

Warning

Warning message
Warning message

Error

Error message
Error message
Edit this section, Opens in new window

Accessibility

Announcing toast message content without focus

Whenever a toast is present, use srSpeak to read the messagge to the user.

New to WCAG 2.1, satisfying Guideline 4.1.3 requires that:

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

Using ARIA techniques such as role alert and aria-live, toast messages can be made available for screen reading technologies as soon as they are displayed.

Focus

If a Toast has got focusable elements, make sure the focus is set to the first focusable element when the toast is in the view.

Also, make sure you have focus trapped the keyboard navigation when focusing the first focusable element.

Keyboard navigation

The user can navigate the focusable elements with Tab and Shift+Tab. The user can also use Enter for interactive elements.

Edit this section, Opens in new window

Anatomy

Warning message
Toast
  1. Icon (optional)
  2. Text
  3. Action (optional)
  4. Close (optional)

Options

All files archived
Text

Toasts must include text to communicate a message. Write the text as concisely as possible while still being clear about what has happened or happening

Your session is about to expire
Icon

An icon can be used to further emphasize the conveyed message

Image deleted
Action

An action can be included. Let the action label be short, consice and actionable

2 assets missing
Close

Whenever an action is used, a close action is mandatory

Auto dismissable

By default, a toast will dismiss after 5 seconds. A toast also has the option to be closed by a close button, when an action is used. If an auto dismissable toast is used, make sure that the action is still accessible elsewhere in the application.

Edit this section, Opens in new window
Contact us, Opens in new window