How to Show Toast Messages in LWC

Like in the Aura components, we can display toast notifications on lightning web components to alert users on actions taken. It can be success, Error, info, and warning.

Fire Toast Notifications in LWC

Here we will show some sample and basic toast notification examples.

lwcToastNotifications.html

<template>
    <lightning-card title="Show Toast Notifications" icon-name="utility:notification">
        <lightning-button label="Show Success Toast" onclick={showSuccessToast}></lightning-button>
        <lightning-button label="Show Info Toast" onclick={showInfoToast}></lightning-button>
        <lightning-button label="Show Warning Toast" onclick={showWarningToast}></lightning-button>
        <lightning-button label="Show Error Toast" onclick={showErrorToast}></lightning-button>
    </lightning-card>
</template>

lwcToastNotifications.js

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

export default class LwcToastNotifications extends LightningElement {

    // Simple success message
    showSuccessToast() {
        const evt = new ShowToastEvent({
            title: 'Success',
            message: 'This is Sample Success Notification',
            variant: 'success'
        });
        this.dispatchEvent(evt);
    }

    // to show info variant and mode is dismissable
    showInfoToast() {
        const evt = new ShowToastEvent({
            title: 'Info',
            message: 'This is Sample Info Notification',
            variant: 'info',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }

    //to show warning message and mode is pester
    showWarningToast() {
        const evt = new ShowToastEvent({
            title: 'Warning',
            message: 'This is Sample Warning Notification',
            variant: 'warning',
            mode: 'pester'
        });
        this.dispatchEvent(evt);
    }

    // to show error message and mode is sticky
    showErrorToast() {
        const evt = new ShowToastEvent({
            title: 'Error',
            message: 'This is Sample Error Notification',
            variant: 'error',
            mode: 'sticky'
        });
        this.dispatchEvent(evt);
    }
}

First, we need to import ShowToastEvent  from platformShowToastEvent.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

Then we need to dispatch ShowToastEvent with Title, message, and variant.

const evt = new ShowToastEvent({
	title: 'Success',
	message: 'This is Sample Success Notification',
	variant: 'success'
});
this.dispatchEvent(evt);

It allows the following parameters to configure toast notification. 

• title: The title of the toast, displayed as a heading.
• message: A string containing a toast message for the user.
• messageData: URL and label values that replace the {index} placeholders in the message string. We will talk about this in my next post.
• Variant: The Variant is used to display the theme and icon of the toast. The Valid Variant values are:
• Success: A green box with a checkmark icon. It's used in case of successful creation or update of a Record.
• info: (Default) A gray box with an info icon. It's used to show any information to the users.
• warning: A yellow box with a warning icon. It's used to show some warning messages to users. 
• error: A Redbox with an error icon. It's used in case of DML errors while creating or update of a Record.
• mode: The Mode is used to define the behaver of the Toast. The Valid toast mode values are,
• dismissable: (Default) Remains visible until the user clicks the close button or 3 seconds has elapsed, whichever comes first.
• pester: Remains visible for 3 seconds.
• sticky: Remains visible until the user clicks the close button.

lwcToastNotifications.js-meta.xml

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

Also found above code in Tech Shorts Git repo