Lightning

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.


Property NameRequired?Description
titleYesTo display title of toast message, displayed as header.
messageYesActual message to be displayed, this will be like body of toast message.
variantYesWhether it is displayed as Info (Gray)success (Green)warning (Yellow)error (Red).
modeNoThis attribute specifies how long will be toast message stays on Screen. dismissable – (Default) Toast message comes with a close icon where user can choose to close the message or by default it is visible for 3 secondspester – Toast message will be visible for 3 seconds.sticky – Remains visible until user clicks on close icon.
messageDataNourl and label values that replace the {index} placeholders in the message string.
Different attributes of 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s