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.
To display a toast notification in Lightning Experience or Aura sites in Experience Cloud, import ShowToastEvent
from the lightning/platformShowToastEvent
module.
ShowToastEvent
isn’t supported on login pages in Aura sites. ShowToastEvent
is also unsupported in LWR sites in Experience Cloud. Instead, use the lightning/toastContainer
module (Beta).
The lwc-recipes repo has a miscToastNotification
component that lets you customize and send a toast so that you can try out the variations.
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.
ShowToastEvent Parameter | Type | Description |
---|---|---|
title | String | The title of the toast, displayed as a heading. |
message | String | A string containing a message for the user. |
messageData | String[] or Object | url and label values that replace the {index} placeholders in the message string. |
variant | String | The theme and icon displayed in the toast. Valid values are:
|
mode | String | Determines how persistent the toast is. Valid values are:
|
To run this code, push the github.com/trailheadapps/lwc-recipes source to a Salesforce org.
See Also