COMPONENTS

Toast

Toast is a lightweight and easily customizable Alert message that appears at a prescribed location of an application window.

toast-intro
toast-anatomy
  1. Leading icon
  2. Message
  3. Button
  4. Close icon
  5. Alert container

Dismissible toasts display until the user selects the close icon. Toasts can be set to automatically dismiss after a specified period of time, but can be dismissed sooner if the user selects the close icon.

toast-variations-close-icon

Programmatically dismissible toasts are dismissed when a user takes a certain action. For example, when a user is given a task to approve something.

toast-variations-programmatically-dismissible

Toasts offer the following messaging states — none, information, success, warning, or error.

toast-appearance

Toasts can be placed in the following positions on a screen— top left, top, top right, left, center, right, bottom left, bottom, or bottom right.

toast-behaviors

Toasts can be displayed in large, medium, and small sizes.

toast-sizes
toast-guidelines-do

Toasts are meant to be short and brief. If you need a longer message use an Alert.

toast-guidelines-don't

Avoid using toasts for critical messages that a user must see. Use an Alert instead.

toast-guidelines-mobile
Use a large size for toasts that have actionable areas and need a larger tap area.