Toast or dialog?

Toasts should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience.

Dialogs are ideal for when a situation requires a user's attention, either for displaying important information or prompting for a response.

Placement

By default, a toast is placed at the bottom center for both desktop and mobile platform scales to avoid disrupting the user experience.

For desktop applications, a toast should be placed 16 px away from the bottom of the viewport.

If a toast isn't noticeable or disrupts the user experience, its placement can be changed to bottom end, top end, or top center.

Don't display more than one action

Actionable toasts should only have one button.

Don't include a redundant action

Actionable toasts should not have a button with a redundant action. For example, including a "Dismiss" button would be redundant because all toasts already have a close button.

Multiple toasts

Toasts are designed for brief, non-intrusive, and temporary notifications. While displaying multiple toasts is available via the React Spectrum implementation, we still discourage triggering multiple toasts simultaneously when possible, as this can be very distracting to the user.

Frequent interruptions interfere with usability, especially for people with visual and cognitive disabilities (see WCAG Success Criterion 2.2.4 Interruptions).

Products should allow for users to be able turn off all types of alerts. Doing this helps people who want to focus and minimize information that they may find non-essential.