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.

A toast notification displaying as a green banner in the LWC Recipes sample app.

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: `info`—(Default) A gray box with an info icon. `success`—A green box with a checkmark icon. `warning`—A yellow box with a warning icon. `error`—A red box with an error icon. You can see the styling for each theme in the Lightning Design System documentation.
`mode`	String	Determines how persistent the toast is. Valid values are: `dismissible`—(Default) Remains visible until the user clicks the close button or 3 seconds has elapsed, whichever comes first. `pester`—Remains visible for 3 seconds. `sticky`—Remains visible until the user clicks the close button.

To run this code, push the github.com/trailheadapps/lwc-recipes source to a Salesforce org.

See Also