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 does not require users’ action right away. A Toast can be triggered by a system event of by a 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 toasts appears right below the information it is communicating about, and therefore should be used for contextual notifications.

Anatomy

A toast can be composed of one, two or three slots.

  1. Leading slot: this slot allows for an icon. The icon variant depends on the status of the toast.
  2. Text slot: this slot allows for a headline, and optionally a sub text and/or a link button.
  3. Trailing slot: this slot allows for a close icon.

Toast component anatomy

A Toast has a few mandatory elements, and a lot of optional ones.

Toast component elements

When to use a Toast

Floating toast

A Floating toast should be used for global notifications of medium importance that are not crucial to users and therefore don’t have to interrupt their flow. A Floating toast can either be triggered by a system event and a user interaction.

Inline toast

An Inline toast should be used for contextual notifications of medium importance. Inline toasts with success and warning statuses shouldn’t require an action from users, whereas inline toasts with warning and error statuses may require an action. A Floating toast can either be triggered by a system event and a user interaction.

When not to use a Toast

  • When the notifications communicates information that should require users’ attention right away, consider a Dialog instead;
  • When the notification communicates global information that is relevant for all users or a group of users for a longer time span, consider an Alert instead.

Size

Width

  • The width of an Floating toast on desktop would be 352px. This is a fixed width;
  • The width of a Floating toast on mobile would be 100vw-48px to accommodate for margins;
  • The width of an Inline toast on both desktop and mobile would adapt to the current element it’s presented in / same as surrounding content.

Height

  • The minimum height of both a Floating and Inline toast on desktop or mobile is 41px.

Stacking Floating toasts

There can be several Floating toasts stacked on top of each other. There should be 16px spacing between the Floating toasts, and 32px above the first Floating toast.

Floating toasts stacked on top of each other

Placement

Placement Floating toast

On desktop, a Floating toast appears on the top right of the screen. On mobile, a Floating toast appears on the top centre of the screen. A Floating toast overlays content.

Placement Inline toast

On both desktop and mobile, an Inline toast always should be placed in context. Preferably below the content it is about.

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

In development backlog

The Toast component is not yet released as a developed component. Usage documentation is published since Figma component is ready.