How to display Toast messages in LWC

 How to display Toast messages in Lightning Web Components

A lightning web component can send a toast notification that can be inform users of a success, error, or warning information. If we want to show a toast message notification in Lightning Experience or Lightning communities, then we need to import ShowToastEvent function from the lightning/platformShowToastEvent module. So that we can create ShowToastEvent in the function wherever we want. ShowToastEvent contains title, message, messageData, variant, mode parameters.

title: It is String attribute. Used for showing title of the toast and displayed as a heading.

message: It is a String attribute. It is used for showing message in the toast.

variant: It is a String attribute. It controls theme and icon displayed in the toast notification. We can give Success, Info, Error Warning values based on requirement.

mode: It is a string to define how toast notification should persistent. Valid values: sticky, pester, dismissable .

• sticky: If we use this, toast notification will not be closed automatically, user need to click on  close button to close toast notification.
• dismissable: it's a default value. If we use this, user can see close button & toast notification closed automatically after 3 seconds.
• pester: If we use this option, toast notification closed automatically after 3 seconds & user can't see close button.

Example:  Show Toast messages in Lightning Web Components(LWC)

In below example we have four buttons, I.e Success, Info, Warning, Error. When particular button click event happens, we are dispatching ShowToastEvent event in the corresponding functions. 

lwcShowToast.js

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

export default class LwcShowToast extends LightningElement {
    //Sample Success Toast message code
    showSuccessNotification() {
        const evt = new ShowToastEvent({
            title: "Success",
            message: "This is sample success message",
            variant: "success",
        });
        this.dispatchEvent(evt);
    }
    
    //Sample code for showing error message in Toast
    showErrorNotification() {
        const evt = new ShowToastEvent({
            title: "Error",
            message: "This is sample error message",
            variant: "error",
        });
        this.dispatchEvent(evt);
    }

    //Sample code for showing warning message in Toast
    showWarningNotification() {
        const evt = new ShowToastEvent({
            title: "Warning",
            message: "This is sample warning message",
            variant: "warning",
            mode: "sticky"
        });
        this.dispatchEvent(evt);
    }

    //Sample code for showing Info message in Toast
    showInfoNotification() {
        const evt = new ShowToastEvent({
            title: "Info",
            message: "This is sample info message",
            variant: "info",
            mode: "pester"
        });

        this.dispatchEvent(evt);
    }
}

lwcShowToast.js

<template>
    <lightning-card title="Toast Messages" icon-name="custom:custom19">
        <div class="slds-p-around_medium">
            <lightning-button variant="success" label="Show Success" onclick={showSuccessNotification}></lightning-button>
            <lightning-button variant="destructive" label="Show Error" onclick={showErrorNotification}></lightning-button>
            <lightning-button variant="destructive-text" label="Show Warning" onclick={showWarningNotification}></lightning-button>
            <lightning-button label="Show Info" onclick={showInfoNotification}></lightning-button>
        </div>
    </lightning-card>
</template>

Output of Show Toast Message Notifications in LWC :

Subjects:

Lightning Web Components Basics LWC LWC Basics Toast Notifications In LWC

Share This: