Toast Messages in Lightning Web Component

A Component can send a toast notification that pops up to alert users of success, error, or warning. A Toast can also simply provide information.

A Component can send a toast notification that pops up to alert users of success, error, or warning. A Toast can also simply provide information. You can style toast and can configure the visibility of the toast. It can remain visible for three seconds until the user clicks to dismiss it, or a combination of both. To display a toast notification in lightning experience or lightning communities, import showToastEvent from the lightning/platformShowToastEvent module. 

Toast Event Properties 

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: 

  • Info – (Default) A gray box with an info 
  • icon. 
  • Success – A green box with a checkmark icon. 
  • Warning – A yellow box with a warning icon. 
  • Error – A red box with an error icon. 
mode String Determines how persistent the toast is. Valid values are: 

  • Dismissable – (Default) Remains visible until 

the user clicks the close button or 3 seconds has elapsed, whichever comes first. 

  • Pester – Remains visible for 3 seconds. 
  • Sticky – Remains visible until the user clicks the close button. 

 

 Create Lightning Web Component 

Create a Lightning Web component using the following SFDX command. In this component we will be showing the input values with button. Once the values are entered and button is clicked, then the entered values will be validated, and toast messages will be displayed. 

sfdx force:lightning:component:create –type lwc -n Notification -d force-app/main/default/lwc 

Notification.html  

Notification.js  

Notification.js-meta.xml  

Push the changes to Scratch Org 

You can push the changes to scratch org using the below command and add this component to either record page or home page or app page using lightning app builder 

sfdx force:source:push 

Output 

Warning Toast – if the name is entered with less than 3 characters, then warning toast message will be displayed when the cursor moves.  

Error Toast – If you entered with invalid format, then the error toast message will be displayed when the cursor moves.  

When you click the submit button without entering name or email, then error toast will be displayed.  

Info Toast – If you enter the name with more than 15 characters, then info toast message will be displayed when the cursor moves from the name text box. 

Success Toast – If there is no error found when you click the submit button, then the success toast message will be displayed.  

References 

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_toast 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Events in LWC

Introduction to Events  An event that fired by another lightning component or the component itself. Events is nothing but the way component is going to

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.