Toast Notification in Lightning Web Components (LWC)

A toast notification is a small, temporary popup message that appears on the screen to give users quick feedback, like success or error messages. Toasts are commonly used in apps and websites to inform users about actions like form submissions or saved changes. In this article, we’ll learn how to create and customize Toast notifications in Lightning Web Components (LWC) to enhance the user experience.

What is a Toast Notification?

A toast notification is a small, non-intrusive message that appears on the screen to notify users about an event or action. It can be automatically dismissed after a few seconds or stay until the user closes it.

Creating a Toast Notification in LWC

In order to display a toast notification in Lightning Web Components(LWC) we have to import the ShowToastEvent from the lightning/platformShowToastEvent module.

Example Code

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ToastNotificationExample extends LightningElement {
    showToast() {
        const event = new ShowToastEvent({
            title: 'Success!',
            message: 'The record has been created successfully.',
            variant: 'success',
        });
        this.dispatchEvent(event);
    }
}

To trigger the toast notification, you can add a button in the component’s HTML file:

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

Customizing Toast Notifications

You can customize the toast notification by setting different properties while creating the ShowToastEvent. Below are some key properties:

• title: The title of the toast notification.
• message: The message displayed in the toast.
• variant: Defines the type of notification: success, error, warning, or info.
• mode: A dismissible toast remains visible until the user clicks close or after 3 seconds. A pester toast stays for 3 seconds before disappearing. A sticky toast remains visible indefinitely until the user manually closes it.

Complete Code

Have a look at complete code where we have created 4 buttons to display notification with different variant. Also the mode in first 2 buttons are dimissible and in the 3rd we have used pester and sticky in the last one.

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ToastNotification extends LightningElement {
    // Method to show an error toast notification
    showErrorToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Error Example', // Title of the toast
            message: 'Some unexpected error occurred', // Message displayed in the toast
            variant: 'error', // Variant type (error)
            mode: 'dismissable' // Dismissable mode allows user to close the toast
        });
        this.dispatchEvent(evt); // Dispatch the event to show the toast
    }

    // Method to show a success toast notification
    showSuccessToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Success Example',
            message: 'Record saved successfully.',
            variant: 'success', // Success variant for positive confirmation
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }

    // Method to show a warning toast notification
    showWarningToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Warning Example',
            message: 'You are being warned.',
            variant: 'warning', // Warning variant for alerts
            mode: 'pester' // Pester mode keeps the toast visible until user interacts with it
        });
        this.dispatchEvent(evt);
    }

    // Method to show an informational toast notification
    showInfoToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Info Example',
            message: 'Some useful information for the user.',
            variant: 'info', // Info variant for general information
            mode: 'sticky' // Sticky mode keeps the toast until manually closed
        });
        this.dispatchEvent(evt);
    }
}

Here is the HTML Code where we have created 4 lightning button.

<template>
    <lightning-card title="Toast Notification Example">
        <lightning-button label="Show Error Toast" onclick={showErrorToast}></lightning-button>
        <lightning-button label="Show Success Toast" onclick={showSuccessToast}></lightning-button>
        <lightning-button label="Show Warning Toast" onclick={showWarningToast}></lightning-button>
        <lightning-button label="Show Info Toast" onclick={showInfoToast}></lightning-button>
    </lightning-card>
</template>

This is what the component will look like when viewed from the browser.

Also, check out the below video on How to develop toast notification in Salesforce Lightning Web Components(LWC).

We hope now you know How to develop Toast Notification in Lightning Web Components (LWC). If you have any doubts then let us know in the comment box below.