Lightning Web components(LWC) Toast Messages

Let’s discuss here how to use the toast notification in Lightning web component.  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. To display a toast notification in Lightning Experience or Lightning communities, import ShowToastEvent from the lightning-platform-show-toast-event module. You can style a toast to provide information, an error, a success, or a warning. You can also configure the visibility of the toast. It can remain visible for three seconds, until the user clicks to dismiss it, or a combination of both. To trigger a toast from a Lightning web component, in the component’s JavaScript class, import ShowToastEventfrom lightning/platformShowToastEvent. Create a ShowToastEvent with a few parameters, and dispatch it. The app handles the rest.

1. Import ShowToastEvent from lightning/platformShowToastEvent. Create and dispatch a ShowToastEvent event with titlemessagevariant, and mode properties.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

2. Create a ShowToastEvent with a few parameters, and dispatch it

showToast() {
        const event = new ShowToastEvent({
            title: 'Get Help',
            message: 'Salesforce documentation is available in the app. Click ? in the upper-right corner.',
        });
        this.dispatchEvent(event);
    }

 

Show Error Toast 

use this code to show the error toast message

const evt = new ShowToastEvent({
                title: 'Application Error',
                message: 'Something went wrong ',
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Show Warning Toast 

Use this code to show the warning Toast

 const evt = new ShowToastEvent({
                title: 'Application Warning',
                message: 'Something went wrong ',
                variant: 'warning',
                mode: 'pester'
            });
       this.dispatchEvent(evt);

Show Success Toast 

Use this code to show the success toast message

 const evt = new ShowToastEvent({
                title: 'Record Update',
                message: 'Application is loaded ',
                variant: 'success',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Show Info Toast 

Use this code to show the info toast

const evt = new ShowToastEvent({
                title: 'Application Info',
                message: 'Please contact System Admin ',
                variant: 'info',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Here is the complete code the custom lightning web component .create a new lightning web component using the SFDX command

sfdx force:lightning:component:create --type lwc -n Notification -d force-app/main/default/lwc

Here is the Notification.html code

<template>
    <h1> Notifications </h1>
    <lightning-button label="Show error" onclick={showErrorToast}></lightning-button>
    <lightning-button label="Show warning" onclick={showWarningToast}></lightning-button>
    <lightning-button label="Show success" onclick={showSuccessToast}></lightning-button>
   <lightning-button label="Show Info" onclick={showInfoToast}></lightning-button>
</template>

Here is the Notification.js JavaScript controller

import {
    LightningElement
} from 'lwc';
import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';
export default class Notification extends LightningElement {
    showErrorToast() {
            const evt = new ShowToastEvent({
                title: 'Application Error',
                message: 'Something went wrong ',
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
        showWarningToast() {
            const evt = new ShowToastEvent({
                title: 'Application Warning',
                message: 'Something went wrong ',
                variant: 'warning',
                mode: 'pester'
            });
            this.dispatchEvent(evt);
        }
        showSuccessToast() {
            const evt = new ShowToastEvent({
                title: 'Record Update',
                message: 'Application is loaded ',
                variant: 'success',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
        showInfoToast() {
            const evt = new ShowToastEvent({
                title: 'Application Info',
                message: 'Please contact System Admin ',
                variant: 'info',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
}

Use this Notification.js-meta.xml configuration files

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

</LightningComponentBundle>

Push the changes to scratch org and add this component to the record page and you can able to see the different toast notification based on the button click.