Skip to main content

Toast

A toast is a temporary notification that informs users on the outcome of an action.

Code documentation

Web

Anatomy

The toast component is made up of two elements.

  1. Notification
  2. Default slot
Anatomy diagram numbering two elements of a toast.

Variants

Appearance

Neutral

Neutral toasts are used in contexts that are largely informative and have no positive or negative connotation.

The informational message 'Servers will be down for maintenance next Sunday' is placed within a neutral notification.

Positive

Positive toasts are used in contexts that convey a positive connotation such as approved, complete, and deposited.

The affirmative message 'Your changes were successfully saved' is placed within a positive notification.

Negative

Negative toasts are used in contexts that convey a negative connotation such as error, alert, or rejected.

The error message 'An error occurred' is placed within a negative notification.

Icon

A user-customizable icon can be paired with the text for increased visual emphasis.

An 'I' within a circle precedes the message 'Servers will be down for maintenance next Sunday' to visually convey its informational nature.

Dismiss button

An icon-only dismiss button can be included to clear the toast. The icon is user-customizable.

An X icon is aligned to the right edge of the notification container inline with the notification text.

Action buttons

Buttons can be used to provide the user a contextual action.

A negative alert with the message 'Oops. We weren't able to load all of your data' has one inline action button labeled 'Retry'.

Stacked

By default, action buttons are in line with the text. However, they can be stacked below the text in situations where either the text or the button label are relatively long.

A negative alert with the message 'Oops. There was a problem connecting to the server. We weren't able to load all of your data' has two action buttons, one labeled 'Troubleshoot' and another labeled 'Retry'. These action buttons are positioned below the message text and 'X' dismiss button.

Behavior

Dismiss

Toasts are set to auto-dismiss after five seconds by default, but they may be manually dismissed if needed. The user can adjust the timeout that denotes when the toast will dismiss as well as set it to a value that will functionally disable auto-dismiss.

Text overflow

Notifications resize to fill the width of the toast container. Text within each notification wraps according to the default notification text overflow behaviors.

A sample message wraps to multiple lines when it meets the invisible boundary formed by the 'X' dismiss button within the fixed-width toast.

Controller

The following additional toast behaviors are handled by a separate toast controller component.

Placement

When triggered, the toast controller places the toast in the bottom-left corner of the viewport. This placement is "sticky" to ensure the toasts remain anchored to the bottom-left of the view even when scrolling. The z-index for individual toasts as well as the controller itself can be redefined to help control the layer of elements within the view.

Two toasts are stacked and shown placed in the bottom-left corner of a mock dashboard view.

Multiple toasts vertically stack with the newest notification occupying the bottom-most position. Previous notifications are pushed up maintaining the preset spacing until they are either manually or automatically dismissed.

Max count

A max count can be set to determine the maximum number of toasts that can be displayed at a time. When a toast is added past the max count, the oldest toast at the top of the stack automatically dismisses. The default max count is three, but it can be adjusted by the user.

A series of four toasts are vertically stacked in the bottom-left corner of a mock dashboard view. The oldest toast at the top of the stack is starting to fade out as it is automatically dismissed.