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:
|
| mode | String | Determines how persistent the toast is. Valid values are:
the user clicks the close button or 3 seconds has elapsed, whichever comes first.
|
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
