Display Notification in LWC

In this topic, we will get to know about various display notification used in LWC

A component can send a notification that pops up to alert users, request confirmation from them, prompt a response, or simply provide information.

In LWC, we have 4 ways to display notification

1. Alert Modal
2. Confirm Modal
3. Prompt Modal
4. Toast Notification

Alert Modal

To display an alert modal in Lightning Experience, import LightningAlert from the lightning/alert module, and call LightningAlert.open() with your desired attributes.

LightningAlert.open() is always return Promise, to handle promise use async/await or .then() for any code you want to execute after the modal is closed.

Confirm Modal

To display a confirm modal in Lightning Experience, import LightningConfirm from the lightning/confirm module, and call LightningConfirm.open() with your desired attributes.

LightningConfirm.open() is always return Promise, to handle promise use async/await or .then() for any code you want to execute after the modal is closed.

Prompt Modal

To display a prompt modal in Lightning Experience, import LightningPrompt from the lightning/prompt module, and call LightningPrompt.open() with your desired attributes.

LightningPrompt.open() is always return Promise, to handle promise use async/await or .then() for any code you want to execute after the modal is closed.

Toast Notification

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

To trigger a toast from a Lightning web component, in the component’s JavaScript class, import “ShowToastEvent” from “lightning/platformShowToastEvent”. Create a ShowToastEvent with a few parameters, and dispatch it.

Paremeters
a. title:- The title of the toast, displayed as a heading.
b. message:- A string representing the body of the message. It can contain placeholders in the form of {0} … {N} with curly braces. The placeholders are replaced with the links on messageData.
c. variant:- success, error, info, warning 
d. messageData:- It accept String[] or an Object, used for “url” and “label” values that replace the {index} placeholders in the message string. 
e. mode:- dismissible(default), pester, sticky.

NOTE:- ShowToastEvent isn’t supported on login pages in Aura sites. ShowToastEvent is also unsupported in LWR sites in Experience Cloud. Instead, use the lightning/toastContainer module (Beta).

Follow me on linkedIn and Twitter for such more related post