Toasts Notification in Lightning Web Component (LWC)

Lightning Web Component is the new paradigm for the development of Lightning Components in Salesforce. I’m going to show you how you can fire Toasts in Lightning Web Component (LWC).
Remember Toast Notification only available in Lightning Experience.

You can display toasts to notify a user about an action, such as after a record is created or updated by the user.

To fire a Toasts event from a Lightning web component, you need to import Show Toast Event in the component’s JavaScript class from lightning/platformShowToastEvent & create a Show Toast Event with some parameters and dispatch it. The Lightning web component app handles the rest.

Following are the parameters that you can pass to Show ToastEvent.

• title: (Required) The title of the toast, displayed as a heading.
• message: (Required) A string representing the body of the message.
• variant: Valid values are: info (default), success, warning, and error.
• mode: Determines how persistent the toast is. Valid values are:
  • dismissable (default), remains visible until you press the close button or 3 seconds has elapsed, whichever comes first.
  • pester, remains visible until the close button is clicked.
  • sticky remains visible for 3 seconds.

lwcToast.html

<template>
    <lightning-card title="Show Toast Example"  icon-name="custom:custom14">
        <lightning-messages></lightning-messages>
        <div class="slds-m-around_large">
            <lightning-button  name="success" 
                                onclick={handleClick} 
                                variant="Success" 
                                label="Success Notification"></lightning-button>
        </div>
        <div class="slds-m-around_large">
            <lightning-button  name="error" 
                                onclick={handleClick} 
                                variant="destructive" 
                                label="Error Notification"></lightning-button>
        </div>
        <div class="slds-m-around_large">
            <lightning-button  name="warning" 
                                variant="brand"
                                onclick={handleClick} 
                                label="Warning Notification"></lightning-button>
        </div>
        <div class="slds-m-around_large">
        <lightning-button  name="info" 
                            variant="neutral"
                            onclick={handleClick} 
                            label="Info Notification"></lightning-button>
        </div>
    </lightning-card>
</template>

lwcToast.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class LWC_Notify extends LightningElement {
    btnType;
    handleClick(event){
        console.log('btnType');console.log(event.target.name);
        this.btnType = event.target.name;
        console.log(this.btnType);
        if(this.btnType=='success'){
            const evt = new ShowToastEvent({
                title: 'Success',
                message: 'This is Toast of type Success',
                variant: 'success',
            });
            this.dispatchEvent(evt);
        } else if(this.btnType=='error'){
            const evt = new ShowToastEvent({
                title: 'Error',
                message: 'This is Toast of type Error',
                variant: 'error',
            });
            this.dispatchEvent(evt);
        }else if(this.btnType=='warning'){
            const evt = new ShowToastEvent({
                title: 'Warning',
                message: 'This is Toast of type warning',
                variant: 'warning',
            });
            this.dispatchEvent(evt);
        } else if(this.btnType=='info'){
            const evt = new ShowToastEvent({
                title: 'Info',
                message: 'This is Toast of type Info',
                variant: 'info',
            });
            this.dispatchEvent(evt);
        }   
    }
}

lwcToast.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWC_Notify">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Resources: lightning-platform-show-toast-event

To Get Started with Salesforce Lightning Web Components, Click Here.

If you have any suggestions or issue with it, you can post in comment box.
Happy Learning

Support: For any further Salesforce support, Chat with us