Lightning Web Component(LWC) Toast Messages

 Lightning Web component(LWC) can send a toast notification that pops up to alert users of 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/platformShowToastEvent module. We can dispatch this toast on some event like click of button.

 

How to add toast message in Lightning Web component(LWC)

Import Toast Message

1	import { ShowToastEvent } from 'lightning/platformShowToastEvent';

Dispatch toast Message

1 2 3 4 5 6 7 8 9

showToast() {     const event = new ShowToastEvent({         title: 'Toast message',         message: 'Toast Message',         variant: 'success',         mode: 'dismissable'     });     this.dispatchEvent(event); }

 

Here are some point about toast message:

• We can style toast to provide error, success, warning and information message using mode parameter.
• We can also configure the visibility of the toast using variant. 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.

Types of toast messages Lightning Web Component(LWC)

Error Toast

1 2 3 4 5 6 7 8 9

showErrorToast() {     const evt = new ShowToastEvent({         title: 'Toast Error',         message: 'Some unexpected error',         variant: 'error',         mode: 'dismissable'     });     this.dispatchEvent(evt); }

Success Toast

1 2 3 4 5 6 7 8 9

showSuccessToast() {     const evt = new ShowToastEvent({         title: 'Toast Success',         message: 'Opearion sucessful',         variant: 'success',         mode: 'dismissable'     });     this.dispatchEvent(evt); }

Warning Toast

1 2 3 4 5 6 7 8 9

showWarningToast() {     const evt = new ShowToastEvent({         title: 'Toast Warning',         message: 'Some problem',         variant: 'warning',         mode: 'dismissable'     });     this.dispatchEvent(evt); }

Info Toast

1 2 3 4 5 6 7 8 9

showInfoToast() {     const evt = new ShowToastEvent({         title: 'Toast Info',         message: 'Operation will run in background',         variant: 'info',         mode: 'dismissable'     });     this.dispatchEvent(evt); }

LWC Toast Messages Example

toastNotificationExampleLWC.html

1 2 3 4 5 6 7 8

<template>     <lightning-card title="Notification" icon-name="custom:custom19">         <lightning-button label="Show Error" onclick={showErrorToast}></lightning-button>         <lightning-button label="Show Success" onclick={showSuccessToast}></lightning-button>         <lightning-button label="Show Warning" onclick={showWarningToast}></lightning-button>         <lightning-button label="Show Info" onclick={showInfoToast}></lightning-button>     </lightning-card> </template>

toastNotificationExampleLWC.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

import { LightningElement } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class ToastNotificationExampleLWC extends LightningElement {     showErrorToast() {         const evt = new ShowToastEvent({             title: 'Toast Error',             message: 'Some unexpected error',             variant: 'error',             mode: 'dismissable'         });         this.dispatchEvent(evt);     }     showSuccessToast() {         const evt = new ShowToastEvent({             title: 'Toast Success',             message: 'Opearion sucessful',             variant: 'success',             mode: 'dismissable'         });         this.dispatchEvent(evt);     }     showWarningToast() {         const evt = new ShowToastEvent({             title: 'Toast Warning',             message: 'Some problem',             variant: 'warning',             mode: 'dismissable'         });         this.dispatchEvent(evt);     }     showInfoToast() {         const evt = new ShowToastEvent({             title: 'Toast Info',             message: 'Operation will run in background',             variant: 'info',             mode: 'dismissable'         });         this.dispatchEvent(evt);     } }

toastNotificationExampleLWC.js-meta.xml

1 2 3 4 5 6 7 8 9 10

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

Now we can use LWC component into home page .