Toast Message in Lightning Web Component

It is always a good practice to display a toast message so that users are aware of what is happening in system. A toast message can be show to user when you want to show a Success message or an Error message or a Warning message. Toast message is simple to write and very effective.

In this blog we will see all 3 ways in which we can display a toast message. 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.

When you dispatch an event to show the toast message you need to know few properties that are used in toast message.

Syntax.

const a_Event_Name = new ShowToastEvent({
	title: 'Title of toast',
	message: 'Message to toast',
	variant: 'Variant of toast',
	mode: 'Mode of toast'
});
this.dispatchEvent(a_Event_Name);

You need to replace variant and mode as per requirement and options are mentioned in above table.

You need to import ShowToastEvent from platformShowToastEvent as shown below.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

sample_Toast_Message.html

<template>
     <div class="slds-box slds-theme_default">
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Info" 
                 onclick={handle_Info}>
             </lightning-button>
         </div>
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Success" 
                 onclick={handle_Success}>
             </lightning-button>
         </div>
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Error" 
                 onclick={handle_Error}>
             </lightning-button>
         </div>
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Warning" 
                 onclick={handle_Warning}>
             </lightning-button>
         </div>
     </div>
 </template> 

sample_Toast_Message.js

  import { LightningElement } from 'lwc';
  
 // import standard toast event
 import { ShowToastEvent } from 'lightning/platformShowToastEvent';
  
 export default class Sample_Toast_Message extends LightningElement {
     
     handle_Info(event){
         const a_Info_Event = new ShowToastEvent({
             title: 'Info Title',
             message: 'This is an info message',
             variant: 'info',
         });
         this.dispatchEvent(a_Info_Event);
     }
  
     handle_Success(event){
         const a_Success_Event = new ShowToastEvent({
             title: 'Success Title',
             message: 'This is a success message',
             variant: 'success',
         });
         this.dispatchEvent(a_Success_Event);
     }
  
     handle_Error(event){
         const a_Error_Event = new ShowToastEvent({
             title: 'Error Title',
             message: 'This is an error message',
             variant: 'error',
         });
         this.dispatchEvent(a_Error_Event);
     }
  
     handle_Warning(event){
         const a_Warning_Event = new ShowToastEvent({
             title: 'Warning Title',
             message: 'This is a warning message',
             variant: 'warning',
         });
         this.dispatchEvent(a_Warning_Event);
     }
 } 

sample_Toast_Message.js-meta.xml

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

Once you deploy the code and check for result you can find output something like this.

1. Error Message

• Info Message

• Success Message

• Warning Message

Note:

• Use toast message for both success and error(exception) message.
• All attributes and values are case sensitive.
• Avoid using toast message in field validation rule (does not look good) as all toast messages are displayed at once.
• info variant is default variant
• You can check how to use messageData from salesforce documents.