Toasts Notification in Lightning Web Component (LWC)

Toasts Notification using ShowToast Event in Salesforce

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>
Toast Notification in Lightning Web Component (LWC) Example.

ShowToastEvent Example
Toast Notification in Lightning Web Component (LWC) Example.

ShowToastEvent Example

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

Parul Singh

I’m a Salesforce Certified Service Cloud Consultant, Certified Administrator & Certified Platform Developer. I have 2 years of experience, currently working on Field Service Lightning, Lightning Flows and Learning Lightning Web Component. I was featured in the top Salesforce Bloggers of 2018 by www.forcetalks.com

You may also like...

Want to know more about Salesforce Devlopments?

We keep your data private and share your data only with third parties that make this service possible. Read our Privacy Policy.

Holler Box