Toast Messages in Lightning Web Component

Share on facebook
Share on twitter
Share on linkedin
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

Mobile Responsive Testing

Mobile Responsive Testing is simply a Testing Process performed to make sure that your website or an app is working appropriately on all types of devices.
Whether it an app or website, they need to ensure that they are accessible from any device, anytime, anywhere.

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.