Toast Notifications

A component can send a toast notification that pops up to alert users of a success, error, or warning. A toast can also simply provide information.

There are several ways to display a toast.

• lightning/toast - This is the preferred method to display a toast. Call the show() method on the lightning/toast module. lightning/toast supports inline links in both the toast title and message.
• lightning/platformShowToastEvent - Dispatch the ShowToastEvent event using your toast attributes. This module isn't supported on login pages in Aura sites, LWR sites for Experience Cloud, and standalone apps. Inline links are not supported in the toast title.

To manage your toasts on a page, use the lightning/toastContainer module. For example, you can specify the toast position or the maximum number of toasts to be displayed.

To display a toast using lightning/toast, import the module and call the show() method. Provide a title using the required label property. The toast message property is optional. Both properties support inline links using the placeholder syntax {N} or {linkName}. For more information, see the lightning/toast specification.

lightning/platformShowToastEvent uses an event-based mechanism to display a toast, and it's not supported in environments like LWR sites for Experience Cloud or standalone apps. We recommend that you use lightning/toast instead.

The HTML template builds the toast that you see in the screenshot.

Simply import ShowToastEvent from lightning/platformShowToastEvent. Create and dispatch a ShowToastEvent event with title, message, variant, and mode properties. This example uses the default value for mode, so it’s not included.

Customize the toast behavior on a page using the lightning/toastContainer module for these use cases.

• Specify the maximum number of toasts that can be displayed on a page. The default is 3.
• Set the position at the top or bottom of a page. The default is top-center.
• Set the container position on a page. The default is fixed.

For more information, see the lightning/toastContainer specification.

To manage your toasts, import the lightning/toastContainer module and create an instance of the toast container component. Only one instance of toast container is supported on a page.

The lightning/toastContainer module manages toasts that are created using the lightning/toast and lightning/platformShowToast modules. If you have different components that use either module on a single page, the toasts created by those modules are subject to the toast container's configuration.

When the page displays the maximum number of toasts, any attempt to display an additional toast results in the toast being displayed only when a toast is closed or dismissed. For example, the maxToasts value is 5 and there are 5 toasts already displayed on a page. When you try to open another toast, that toast is hidden until you close or dismiss at least one of the toasts that's currently displayed.

See Also

• Component Reference: lightning/platformShowToastEvent
• Component Reference: lightning/toastContainer