Toast

Show navigation section

Introduction

An example of the toast component.

Interactive example

Display toast component

When to use

Use toasts to provide non-essential information relating to a user’s current task.

Use toasts to provide an additional method of feedback about a user action. Avoid using toasts as the only method of conveying information to the user.

Toasts can be set to disappear on their own, or remain visible on screen until actioned. Toasts that automatically disappear should not contain any essential information.

An action, such as a link or button, can be included but isn’t recommended. Try to place actions in the main content of the page instead. If an action is included, then the toast can't be set to automatically dismiss.

A comments section with a toast message that says ‘Comment added’ with an ‘undo’ button and a dismiss button.

A toast message containing an action button. The toast has to be manually dismissed.

A comments section with a toast message that says ‘Comment added’ with a link that reads ‘View our privacy statement’, and a dismiss button.

A toast message containing a link. The toast has to be manually dismissed.

It's best to use toasts for passive success messages, for example 'document saved'. This provides useful additional feedback about the completion of a process, without being the only method of conveying this information.

When not to use

If the message must be seen, use an alert or dialog depending on the severity of the problem.

A comments section with a toast message displaying an error that reads ‘Your comment couldn’t be saved’.

Don’t use toast messages to display errors.

Use a dialog to display messages a user must see or acknowledge.

Interaction behaviour

Action

Use a single action in a toast. A button or link can be provided, but the toast can't automatically dismiss if an action is included.

Auto-dismiss

Toasts can be set to auto-dismiss after an adjustable length of time. Make sure that auto-dismissing toasts are displayed for long enough for their content to be read. Make sure the toast content is non-critical so it doesn’t matter if it's missed.

A page with a toast that appears at the bottom center of the screen and disappears after a short delay.

Toasts that contain an action or link can’t be set to auto-dismiss.

Toasts that don’t auto-dismiss will have a close button.

A page with a toast, that has a close button, that appears at the bottom center of the screen and disappears only when the dismiss button is clicked.

Layout and placement

Toasts always appear centred at the bottom of the screen. Positioning toasts here makes sure that they don't obscure key content or navigation that might be positioned at the top of the screen.

Only one toast can be displayed at a time. If multiple toasts are required, they are queued one after the other.

An app called ‘Better latte than never’ displaying an article page and showing a toast message positioned at the bottom and centre of the screen that reads ‘Comment added’.

Position toast message at the centre and bottom of the screen.

An app whose title is obscured by a toast message positioned at the top of the screen that reads ‘Comment added’.

Don’t position toasts at the top of the screen as they may interfere with important content.

Content

Use short messages in toasts. Use the optional description text in addition to the toast title for additional content.

An app called ‘Better latte than never’ showing an article page with comments that displays a toast message with a title that says ‘Comment added’ and a description that says ‘Thanks for letting us know.’.

Use the optional toast description to provide more information on the toast message.

Use one of the following statuses to provide additional meaning to the message:

Success
Warning
Error
Info
Status unknown

Specify a custom icon when using status unknown. Make sure that the icon is related to the toast’s content and that an alt-text description is provided.

Accessibility considerations

When using an auto-dismissible toast message, the app needs to provide a method to extend the duration of the message. This is to satisfy the WCAG 2.2 success criterion 2.2.1 Timing Adjustable .

Last reviewed 15 April 2024 .