Platform Show Toast Event (Beta)

Display toasts to provide feedback to a user following an action, such as after a record is created.

lightning/platformShowToastEvent isn’t supported in LWR sites for Experience Cloud. Use lightning/toast in LWR sites instead. To specify your toast position and the maximum number of toasts to display, use lightning/platformShowToastEvent or lightning/toast with lightning/toastContainer.

You can style a toast to provide information, an error, a success, or a warning. You can also configure the visibility of the toast. It can remain visible for three seconds, until the user clicks to dismiss it, or a combination of both.

To trigger a toast from a Lightning web component, in the component’s JavaScript class, import ShowToastEvent from lightning/platformShowToastEvent. Create a ShowToastEvent with a few parameters, and dispatch it. The app handles the rest.

In this example, when a user clicks the button, the app displays a toast with the info variant, which is the default. The toast remains visible for 5 seconds or until the user clicks the close button, denoted by the X in the top right corner, which is also the default.

1<template>
2    <lightning-button label="Show Toast" onclick={showToast}>
3    </lightning-button>
4</template>

The showToast function creates and dispatches the event. An info toast displays in Lightning Experience for 5 seconds or until the user clicks to close it.

1import { LightningElement } from "lwc";
2import { ShowToastEvent } from "lightning/platformShowToastEvent";
3export default class MyComponent extends LightningElement {
4  showToast() {
5    const event = new ShowToastEvent({
6      title: "Get Help",
7      message:
8        "Salesforce documentation is available in the app. Click ? in the upper-right corner.",
9    });
10    this.dispatchEvent(event);
11  }
12}

To display a link in the message, use the messageData attribute to pass in url and label values for the message string. In the following example, handleButtonClick() displays a toast with a link in the message. handleRecordClick() displays a toast with a link to a record, which uses the lightning/navigation module to generate the URL.

1import { LightningElement } from "lwc";
2import { ShowToastEvent } from "lightning/platformShowToastEvent";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class LightningToastExample extends NavigationMixin(
6  LightningElement
7) {
8  handleButtonClick() {
9    const event = new ShowToastEvent({
10      title: "Success!",
11      message: "Record {0} created! See it {1}!",
12      messageData: [
13        "Salesforce",
14        {
15          url: "http://www.salesforce.com/",
16          label: "here",
17        },
18      ],
19    });
20    this.dispatchEvent(event);
21  }
22
23  handleRecordClick() {
24    this[NavigationMixin.GenerateUrl]({
25      type: "standard__recordPage",
26      attributes: {
27        recordId: "003xx000000001eAAA",
28        actionName: "view",
29      },
30    }).then((url) => {
31      const event = new ShowToastEvent({
32        title: "Success!",
33        message: "Record {0} created! See it {1}!",
34        messageData: [
35          "Salesforce",
36          {
37            url,
38            label: "here",
39          },
40        ],
41      });
42      this.dispatchEvent(event);
43    });
44  }
45}

A toast appears in reaction to a user action: creating, editing, deleting. For example, a user edits a record and saves it. For more information, see Messaging Design Guidelines.

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.

This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.

The LWC Recipes GitHub repository contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses lightning/platformShowToastEvent, see the following components in the LWC Recipes repo.

• c-lds-create-record
• c-misc-toast-notification

Toast Notifications