I will explain how to show toast notification in LWC.
Note: Toast Notification is only available in Lightning Experience.
Toast is used to notify the user about an action that has been performed like create, update, or delete of any record or any kind of success/failure encountered.
In LWC, it is achieved by importing ShowToastEvent in the component’s JavaScript class from lightning/platformShowToastEvent & create a Show Toast Event with some parameters and dispatch it.
Here is the list of parameters that is used in the Toast Event.
| ShowToast Event Parameter | Type | Description |
| title | String | The title of the toast displayed as a heading. |
| message | String | A string containing a message for the user. |
| messageData | String[] or Object | URL and label values that replace the
{index} placeholders in the message string. |
| variant | String | The theme and icon displayed in the toast. Valid values are:
|
| mode | String | Determines how persistent the toast is. Valid values are:
the user clicks the close button or 3 seconds has elapsed, whichever comes first.
|
Types of Toast Notification in LWC
Info Toast
showInfoToast() {
const evt = new ShowToastEvent({
title: 'Toast Info',
message: 'Operation will run in the background',
variant: 'info',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Warning Toast
showWarningToast() {
const evt = new ShowToastEvent({
title: 'Toast Warning',
message: 'Some problem occured',
variant: 'warning',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Error Toast
showErrorToast() {
const evt = new ShowToastEvent({
title: 'Toast Error',
message: 'Some unexpected error occuered',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Success Toast
showSuccessToast() {
const evt = new ShowToastEvent({
title: 'Toast Success',
message: 'Opearation sucessful',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Show Toast Messages Example
showToastNotificationInLWC.html
<template>
<lightning-card title="Toast Notification Example" icon-name="custom:custom14">
<lightning-button label="Show Info" variant="neutral" onclick={showInfoToast}></lightning-button><br/><br/>
<lightning-button label="Show Warning" variant="brand" onclick={showWarningToast}></lightning-button><br/><br/>
<lightning-button label="Show Error" variant="destructive" onclick={showErrorToast}></lightning-button><br/><br/>
<lightning-button label="Show Success" variant="Success" onclick={showSuccessToast}> </lightning-button><br/><br/>
</lightning-card>
</template>
ShowToastNotificationInLWC.js
/*
* @description: Show Toast Notification
* @author: sfdc4u.com
*/
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ShowToastNotificationInLWC extends LightningElement {
showInfoToast() {
const evt = new ShowToastEvent({
title: 'Toast Info',
message: 'Operation will run in the background',
variant: 'info',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showWarningToast() {
const evt = new ShowToastEvent({
title: 'Toast Warning',
message: 'Some problem occured',
variant: 'warning',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showErrorToast() {
const evt = new ShowToastEvent({
title: 'Toast Error',
message: 'Some unexpected error occuered',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showSuccessToast() {
const evt = new ShowToastEvent({
title: 'Toast Success',
message: 'Opearation sucessful',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
}
ShowToastNotificationInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>55.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
Now let’s add this LWC component on the home page.
- Go to Home page
- Click Setup (Gear Icon) and select Edit Page.
- Under Custom Components, find your showToastNotificationInLWC component and drag it on right-hand side top.
- Click Save and activate.
We will get the below output:
Reference: Salesforce.com
Also Read: Get Logged-In User Info in LWC