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


The toast component is made up of two elements.

  1. Notification
  2. Default slot




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

The informational message


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

The affirmative message


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

The error message


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


Dismiss button

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

Action buttons

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

A negative alert with the message


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



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

Component tokens

The following component tokens are available for customizing the toast component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.




The toast component uses the following components: