Toast

Also known as

Alert, Notification, Pop-up, Snackbar
Available since
@salt-ds/core@1.0.0

Toast displays a small pop-up notification that provides short feedback in response to a user action or system event related to a workflow or application outside the user’s current focus. It can communicate new information, errors, warnings or successful completion of a process or task.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
  • To notify users of an event that’s occurred in a peripheral application or workflow. The user should notice the toasts without disrupting their experience or requiring immediate action.
  • To communicate low-priority information caused by events. Toasts usually don’t require feedback from the user.
  • To communicate information from a workflow external to the user’s current task or view. Toasts are in an unintrusive location on an interface.
  • To show system-generated alerts, independent of the user’s actions. These toasts are persistent and must allow the user to either take action or dismiss them. Toasts can contain customizable content, such as actionable buttons.
  • To show a notification that applies to the user’s current task. Instead, use Banner. Banner sits either on the top of a page or component or inline and usually addresses issues inside the user’s current content area.
  • When the notification requires immediate action and relates to the user’s current task. Instead, use Dialog to interrupt the user's workflow.

Position the toast where it won’t interfere with navigation or important content in the user interface, for example, in the lower-right corner of the screen or application viewport.

Stack toasts in chronological order if multiple toasts need to appear on screen at the same time.

When you stack toasts from the top, the newest one should be first. When you stack them from the bottom, the newest toast should be at the bottom.

A toast notification is typically limited in space, so content should be clear, concise, and short, allowing users to quickly scan the notification and understand the situation and/or next steps.

Configure titles to display the Body Strong typography style and the messaging Body Default typography style across densities.

In addition to text content, toasts can contain any UI elements such as actionable components, like buttons. This allows the user to act on the message without interrupting their current workflow. For example, users can approve or respond to an update without opening a new window. Users should always be able to close or dismiss a toast.

To import Toast and ToastContent from the core Salt package, use:

To import ToastGroup from the lab Salt package, use:

NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault