Toast

Toasts are non-disruptive messages that appear in the interface, delivering instant feedback.

Interactive demo

This demo lets you preview the toast component and its variations.

Usage

Toasts provide concise and non-disruptive messages for user feedback, enhancing communication and user experience. They deliver important information in a visually appealing and unobtrusive manner. Toasts are a suitable choice when you need to deliver brief and non-disruptive messages to users.

Principles

Instant feedback

Toasts provide immediate feedback to users, keeping them informed about the outcome of their actions or notifying them of important information.

Non-dissruptive

Toasts allow users to continue their tasks without interruption while still providing valuable feedback or information.

Helpful

Toasts should appear in response to a user task or an action, with relevant information.

Content

Do

Primary button is always positioned right to maintain a balance in your layout.

Don't

Avoid position primary action to the left, this creates a unbalanced layout and confused user experience.

Do

Use a single toast to convey a specific message or notification to the user.

Don't

Display multiple toasts simultaneously, as it can create confusion and distract the user.

Formatting

There are different variants of Toasts designed to meet diverse scenarios and user requirements. All Toasts include essential components such as a supporting icon, a title, and a call to action, ensuring effective communication and user engagement. Additionally, you have the option to include supporting text or a secondary action to further enhance the Toast's functionality and provide more context to the user.

Desktop

Title and supporting text

Toast with Title and Additional Text: In this variant, along with the title, additional supporting text is provided to offer more context and clarity to the user.

Title

This variant presents a concise message with a title, ensuring important information is communicated effectively.

Title + message (2 button)

This variant features two buttons, providing users with multiple options to choose from or take different actions based on their preferences.

Title (1 button)

This variant includes a single button, enabling users to take a specific action directly from the Toast itself.

Mobile

The mobile variant is optimized to fit better within the smaller viewport.

Title + message (1 button)

This variant with Title and Supporting Text provides additional information to assist users.

Title (1 button)

This variant presents a concise message with a title, ensuring important information is communicated effectively.

Buttons in a row

A Toast with buttons in a row presents multiple actions side by side, allowing users to easily access and interact with each button.

Stacked buttons

Toast with stacked buttons arranges the actions vertically, providing a clear and organized layout for users to choose from.

Toast to dialog

Toast belongs to the same family as dialog, which means that toast is part of the dialog queue system.

Queue system

If there is one or more visible toasts on the page and one or multiple dialogs are opened at the same time, all visible toasts on the page will transform to dialogs and end up in the dialog queue. The user then needs to take action for each "toast" (now transformed to a dialog) before it can see and take action to the newly opened dialogs.

Anatomy

The Toast consist of essential components like the container, content, and optional elements for presenting information or capturing input.

Atoms

A – Container.
B – Icon.
C – Title.
D – Supporting text (optional).
E – Secondary action (optional).
F– Primary action.

Atoms mobile

A – Container.
B – Icon.
C – Title.
D – Supporting text (optional).
E – Secondary action (optional).
F – Primary action.

Elevation

Toasts are displayed at 24dp elevation and display a shadow. They appear above other content.

Branding

By using the specific brand color in the toast, it maintains a cohesive and visually unified experience.

Desktop variant

Use the business area's brand color for the primary action in the toast. This creates visual consistency and reinforces brand association.

A - Tur.
B - Sport % Casino.

Mobile variant

Similarly, in the mobile variant, the primary action in the toast utilizes the business area's brand color. This ensures consistency across different devices and reinforces brand identity.

A - Tur.
B - Sport % Casino.