Toast

A toast notification is a brief, non-intrusive message that appears on the screen to provide users with information or alerts.

Overview

Toasts are used to inform users about processes within a system. They can also provide contextual feedback. They appear temporarily at the bottom of the screen and disappear after a certain time period or when the user performs an action to remove them.

A toast placed at the bottom of the page.

Dos and Don’ts

Display only one toast at a time.
Limit your message to 35 characters for a single-line toast or 90 characters for a multi-line toast.
Be mindful of how often you trigger toasts.
Use for short messages that confirm an action taken by a user.

Don't

Don’t use toasts for critical information.
Don’t place the toast over any navigational elements.

Anatomy

Icon: Leading icon that visually supports the label.
Message: Informs the user of the action they have performed.
Action (optional): Button action to either dismiss the toast or to undo the action.
Close (optional): Icon button to close the Toast.

Variations

Default

A default single-line toast; this can be used with or without an icon or action.

Multi-line

If you require additional text for your message, please use the multi-line component. Maximum of 3 lines.

A toast component with multiple lines of text. The text is truncated so that a maximum of three lines are shown.

Modifiers

Strong

Use strong colour variants to increase the visual impact of your message.

Info: Providing contextual information about the progress of an action.
Warning: Providing non-critical information about the progress of an action.
Success: Providing positive information about the progress of an action.
Error: Providing critical information about the progress of an action. Please review if toast is the correct component to use. It may be better to use a dialogue, notification or banner.

Subtle

To create a message with less prominence you can use the subtle variant.

Info: Providing contextual information about the progress of an action.
Warning: Providing non-critical information about the progress of an action.
Success: Providing positive information about the progress of an action.
Error: Providing critical information about the progress of an action. Please review if toast is the correct component to use. It may be better to use a dialogue, notification or banner.
Neutral: Neutral: Providing non-urgent general information about the progress of an action.

Icons

When using an icon inside the toast component, you should make sure that the icon clearly conveys the intended meaning. Only use the icons that have been built into the component - do not supply your own.

Don't

Actions

If you are using actions, only use the pre-built button in the toast.

Don't

Sizes

Height

The toast has a minimum height of 48px when displaying one line of text. It should not exceed 122px in height, which is enough to accommodate up to three lines of text.

Width

The toast has a minimum width of 300px and a maximum width of 420px.

Overflow

If the body copy extends beyond one line, it should automatically wrap to multiple lines. Multi-line text will be truncated so that it does not exceed three lines. For longer text content, consider an alternative component.

Priority queue

Only one toast is displayed at a time. When toasts are consecutively or simultaneously triggered, their display order is defined by the priority queue.

Each level takes priority over those below it, queues alongside toasts of the same priority, and yields to higher priority levels.

Priority	Variant
1	Error - actionable
2	Error
3	Warning - actionable
4	Positive - actionable
5	Info - actionable
6	Neutral - actionable
7	Warning
8	Positive
9	Info
10	Neutral

Behaviours

Auto-dismiss

By default the toast automatically disappears after 5 seconds. However, the user can manually dismiss the toast before the timer ends if a close option is present. Additionally, users can pause the auto-dismissal by hovering over the toast, with the timer resetting once the mouse moves away.

Persistent

If the toast has a close icon button or a dismiss button, the toast can be persisted until the user manually dismisses it.

Interactions

If the toast includes either a close icon button or a dismiss button, either can be used to dismiss the toast.

Layout

LTR position

A toast should be located at the bottom left of the page’s content area, excluding any navigation.

A toast placed at the bottom-left of a page with a left-to-right direction.

Wide: 24px padding
Narrow: 16px padding

RTL position

A toast should be located at the bottom right of the page’s content area, excluding any navigation.

A toast placed at the bottom-left of a page with a right-to-left direction.

Wide: 24px padding
Narrow: 16px padding

Examples

LTR examples

Here are some examples of the toast component in a left-to-right context:

A toast component in a left-to-right context.

RTL examples

Here are some examples of the toast component in a right-to-left context:

A toast component in a right-to-left context.

Resources

Figma Component	Stable
Figma Documentation	Stable
Web Components	Alpha
Vue [Fozzie]	N/A
React [Snacks]	Stable
iOS JustUI [UI Kit]	Stable
iOS PIE [SwiftUI]	Stable
Android PIE [Compose & Views]	Beta