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
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 component that lets you customize and send a toast so that you can try out the variations.
The HTML template builds the UI that you see in the screenshot.
lightning/platformShowToastEvent. Create and dispatch a
ShowToastEvent event with
mode properties. This example uses the default value for
mode, so it’s not included.
|String||The title of the toast, displayed as a heading.|
|String||A string containing a message for the user.|
|String or Object|
|String||The theme and icon displayed in the toast. Valid values are: |
|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.