Components – legacy
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
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.
