Home

Toast

UsageDevelopment

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:

  1. Floating Toast: This toast floats into the screen and should be used for global notifications.
  2. 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.

  1. Leading slot: This slot accommodates an icon, with the icon variant depending on the toast’s status.
  2. Text slot: This slot contains a headline and optionally a subtext and/or a link button.
  3. Trailing slot: This slot provides space for a close icon.
Toast component anatomy

A Toast has a few mandatory elements, along with several optional ones.

Toast component elements

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.

Floating toasts stacked on top of each other

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:

  1. Information: used to provide additional information and notes to users that they may find helpful in context.
  2. Warning: used for notices of potential future errors.
  3. Error: used for system failures and user errors.
  4. Success: used to confirm that a task was completed successfully.
Toast 4 different statuses

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.

Toast (inline or floating) without a CTA
Do use the toast (inline or floating) without a CTA if there’s no CTA needed.
Do

Toast without CTA with the same action as the close icon
Don’t use the CTA for communicating and allowing the same action as the close icon does.
Don’t

Other best practices

Inline toast with an error or warning status without a close icon
Do use an Inline toast with an error or warning status without a close icon, and let it disappear only when the problem is solved.
Do

Communicating an information or success message without a close icon
Don’t use a toast without a close icon when the toast is only communicating an information or success message.
Don’t

Nesting components

A Toast can use:

  • Icon
  • Text button

A Toast can be used in:

  • Notification pattern

Resources