# 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.

There are several ways to display a toast.

- `lightning/toast` - This is the preferred method to display a toast. Call the `show()` method on the [`lightning/toast` module](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-toast). `lightning/toast` supports inline links in both the toast title and message.
- `lightning/platformShowToastEvent` - Dispatch the `ShowToastEvent` event using your toast attributes. This module isn't supported on login pages in Aura sites, LWR sites for Experience Cloud, and standalone apps. Inline links are not supported in the toast title.

To manage your toasts on a page, use the `lightning/toastContainer` module. For example, you can specify the toast position or the maximum number of toasts to be displayed.

## Display a Toast Using `lightning/toast`

To display a toast using `lightning/toast`, import the module and call the `show()` method. Provide a title using the required `label` property. The toast `message` property is optional. Both properties support inline links using the placeholder syntax `{N}` or `{linkName}`. For more information, see the \[`lightning/toast` specification]\(<https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-toast?type=Specifications>.

![A toast notification displaying as an info banner with inline links.](https://a.sfdcstatic.com/developer-website/sfdocs/lwc/media/toast_display.png "A toast notification")

```javascript
// toastExample.js
import { LightningElement } from "lwc";
import LightningToast from "lightning/toast";

export default class ToastExample extends LightningElement {
  async handleToastClick() {
    await LightningToast.show(
      {
        label: "Sample title with {0} and {1}",
        labelLinks: [
          {
            url: "https://v1.lightningdesignsystem.com/components/toast/",
            label: "SLDS link",
          },
          {
            url:
              "https://v1.lightningdesignsystem.com/accessibility/guidelines/global-focus/#toasts",
            label: "toast guideline",
          },
        ],
        message: "Sample message with {salesforceLink} and {slackLink}",
        messageLinks: {
          salesforceLink: {
            url: "http://www.salesforce.com",
            label: "Salesforce link",
          },
          slackLink: {
            url: "https://slack.com",
            label: "Slack link",
          },
        },
        mode: "sticky",
        variant: "info",
      },
      this,
    );
  }
}
```

## Display a Toast Using `lightning/platformShowToastEvent`

`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`](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-toast) instead.

:::tip
The [lwc-recipes](https://github.com/trailheadapps/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.](https://a.sfdcstatic.com/developer-website/sfdocs/lwc/media/toast_event.png "A toast notification")

The HTML template builds the toast that you see in the screenshot.

```html
<!-- miscToastNotification.html -->
<template>
  <lightning-card title="miscToastNotification" icon-name="custom:custom19">
    <div class="slds-m-around_medium">
      <lightning-input label="Title" value={_title} onchange={titleChange}></lightning-input>
      <lightning-input
        label="Message"
        value={message}
        onchange={messageChange}>
      </lightning-input>
      <lightning-combobox
        label="Variant"
        value={variant}
        onchange={variantChange}
        options={variantOptions}>
      </lightning-combobox>
      <p class="slds-m-vertical_small">
        <lightning-button label="Show Notification" onclick={showNotification}></lightning-button>
      </p>
    </div>
  </lightning-card>
</template>
```

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.

```javascript
// miscToastNotification.js
import { LightningElement } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class MiscToastNotification extends LightningElement {
  titleText = "Sample Title";
  messageText = "Sample Message";
  variant = "error";
  variantOptions = [
    { label: "error", value: "error" },
    { label: "warning", value: "warning" },
    { label: "success", value: "success" },
    { label: "info", value: "info" },
  ];

  titleChange(event) {
    this.titleText = event.target.value;
  }

  messageChange(event) {
    this.messageText = event.target.value;
  }

  variantChange(event) {
    this.variant = event.target.value;
  }

  showNotification() {
    const evt = new ShowToastEvent({
      title: this.titleText,
      message: this.messageText,
      variant: this.variant,
    });
    this.dispatchEvent(evt);
  }
}
```

## Manage Toasts on a Page

Customize the toast behavior on a page using the `lightning/toastContainer` module for these use cases.

- Specify the maximum number of toasts that can be displayed on a page. The default is 3.
- Set the position at the top or bottom of a page. The default is top-center.
- Set the container position on a page. The default is fixed.

For more information, see the \[`lightning/toastContainer` specification]\(<https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-toast-container?type=Specifications>.

To manage your toasts, import the `lightning/toastContainer` module and create an instance of the toast container component. Only one instance of toast container is supported on a page.

![Multiple toast notifications displaying in the top right of the page.](https://a.sfdcstatic.com/developer-website/sfdocs/lwc/media/toast_container.png "Multiple toast notifications in the top right corner")

```javascript
// toastExample.js
import { LightningElement } from "lwc";
import ToastContainer from "lightning/toastContainer";

export default class ToastExample extends LightningElement {
  connectedCallback() {
    const toastContainer = ToastContainer.instance();
    toastContainer.maxToasts = 5;
    toastContainer.toastPosition = "top-right";
  }
}
```

The `lightning/toastContainer` module manages toasts that are created using the `lightning/toast` and `lightning/platformShowToast` modules. If you have different components that use either module on a single page, the toasts created by those modules are subject to the toast container's configuration.

When the page displays the maximum number of toasts, any attempt to display an additional toast results in the toast being displayed only when a toast is closed or dismissed. For example, the `maxToasts` value is 5 and there are 5 toasts already displayed on a page. When you try to open another toast, that toast is hidden until you close or dismiss at least one of the toasts that's currently displayed.

**See Also**

- [Component Reference: `lightning/platformShowToastEvent`](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-platform-show-toast-event)
- [Component Reference: `lightning/toastContainer`](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-toast-container)