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 ParameterTypeDescription
titleStringThe title of the toast, displayed as a heading.
messageStringA string containing a message for the user.
messageDataString[] or Objecturl and label values that replace the {index} placeholders in the message string.
variantStringThe 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.
modeStringDetermines 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