Toast

Toast

Toast serves as a feedback & confirmation mechanism after the user takes an action.

Base

Preview

About Toast

Accessibility

Notifications should contain role="status" on the container to signal to assistive technology that they require the user’s attention. Historically the role of alert would be used, but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. Role of status is a polite live region, which does not clear the queue, reducing the risk of a toast message being missed.

Use a span with slds-assistive-text to let the user know what type of notification it is.


Overview of CSS Classes

Selector.slds-notify_container
Summary

Initializes a toast container

Restrictdiv
VariantTrue
Selector.slds-notify_toast
Summary

Initializes toast notification

Restrict.slds-notify_container div
Selector.slds-notify__close
Summary

Alert close button

Restrict.slds-notify_toast div