Toast
About
A Toast is a component that belongs to the group of notification components. A Toast can be used for passive notifications that do not require immediate user action. A Toast can be triggered by a system event or by user interaction.
Variants
There are 2 Toast variants:
- Floating Toast: This toast floats into the screen and should be used for global notifications.
- Inline Toast: This toast appears directly below the relevant information, making it suitable for contextual notifications.
Anatomy
A toast can be composed of one, two or three slots.
- Leading slot: This slot accommodates an icon, with the icon variant depending on the toast’s status.
- Text slot: This slot contains a headline and optionally a subtext and/or a link button.
- Trailing slot: This slot provides space for a close icon.
A Toast has a few mandatory elements, along with several optional ones.
When to use a Toast
Floating toast
A Floating toast is used for global notifications of medium importance that are not critical and do not need to interrupt the user’s flow. A Floating toast can be triggered by either a system event or user interaction.
Inline toast
An Inline toast should be used for contextual notifications of medium importance. Inline toasts with success and information statuses typically don’t require user action, whereas those with warning or error statuses may prompt an action. An Inline toast can be triggered by either a system event or user interaction.
When not to use a Toast
- For immediate attention: If the notification requires users’ attention right away, consider using a Dialog instead.
- For long-term global information: If the notification conveys information that is relevant to all users or a group of users over a longer period, consider using an Alert instead.
Size
Width
- Floating Toast (Desktop): The width is fixed at 352px.
- Floating Toast (Mobile): The width is 100vw – 48px to account for margins.
- Inline Toast (Desktop & Mobile): The width is adaptive and matches the width of the surrounding content or the element it’s presented within.
Height
- Floating and Inline Toast (Desktop & Mobile): The minimum height is 41px.
Stacking Floating toasts
Multiple Floating toasts can be stacked vertically. Each toast should have a 16px gap between them, with 32px spacing above the first Floating toast. This ensures consistent spacing and prevents overcrowding on the screen.
Placement
Placement Floating toast
On desktop, a Floating toast appears in the top-right corner of the screen, while on mobile, it is positioned at the top-center of the screen. In both cases, a Floating toast overlays existing content.
Placement Inline toast
On both desktop and mobile, an Inline toast should always be placed in context, preferably positioned directly below the content it refers to.
Behaviour
Statuses
A Toast allows for 4 different statuses to be added to give the notification more body:
- Information: used to provide additional information and notes to users that they may find helpful in context.
- Warning: used for notices of potential future errors.
- Error: used for system failures and user errors.
- Success: used to confirm that a task was completed successfully.
Persistency
- If no close icon: persistent;
- If close icon: persistent until user takes action to close.
For a Floating toast it’s recommended to always offer a close icon. For an Inline toast it might be considered to not allow for a close icon when using Warning or Error statuses, since those often inform about a required action from users before they can move on.
Timing
For a Floating toast, you can define a time the toast will be visible. This is used when the toast doesn’t require an action from the user (which should be the case most often). The toast has a default timing of 3000 ms, which developers are able to adjust if needed.
Keyboard behaviour
- Users can close the toast notification by focusing on the close icon and pressing Enter;
- Users can activate a text button within a toast notification by focusing on the text button and pressing Enter;
- Users can navigate from a text button to the close icon by pressing Tab;
- Users can go back and forth between a text button and the close icon by pressing the left and right arrows.
Content
The overall text (headline + body text + CTA) can consist of 150 characters maximum.
- Headline: A headline preferably consists of max 3 words. It should explain in short what happened or will happen. It does not need a dot to end the sentence.
- Body text: A body text should explain in more detail what happened or will happen. Sometimes both a headline and a body text aren’t needed. In that case you only use the headline to explain.
Other best practices
Nesting components
A Toast can use:
- Icon
- Text button
A Toast can be used in:
- Notification pattern