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


const a_Event_Name = new ShowToastEvent({
	title: 'Title of toast',
	message: 'Message to toast',
	variant: 'Variant of toast',
	mode: 'Mode of toast'

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';


     <div class="slds-box slds-theme_default">
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Info" 
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Success" 
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Error" 
         <div class="slds-p-around_medium lgc-bg">
             <lightning-button label="Warning" 


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


 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="">

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


  • 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.

2 thoughts on “Toast Message in Lightning Web Component

  1. It’s a pity you don’t have a donate button! I’d without a doubt donate to this excellent blog! I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this site with my Facebook group. Talk soon!


  2. Have you ever thought about publishing an e-book or guest authoring on other blogs? I have a blog centered on the same subjects you discuss and would really like to have you share some stories/information. I know my visitors would appreciate your work. If you’re even remotely interested, feel free to shoot me an e-mail.


Leave a Reply

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

You are commenting using your 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