How to create Alerts using LightningAlert LWC?

Hello Friends! In this article, you will learn how to create beautiful-looking Alert dialogs in Lightning web components using the brand-new LightningAlert component from the LWC framework.

Use Case

You have a requirement to show an error message with an Ok button based on the user input or action. For example when the user enters invalid input. Another example could be, "you want to show a success alert to the user on completion of some process".

Properties of LightningAlert

There are three variants of the lightning alert, 

• success - Shows a green-themed alert.
•  error - Shows a red-themed alert.
• warning - Shows an orange-themed alert.

You can change the variant by setting the theme attribute as mentioned below. There are three properties you can set on the alert component.

1. message - the message you want to display on dialog.
2. theme - this is used to change the variant of the component.
3. label - this is the header label for the dialog.

Steps for creating an alert using LightningAlert

1. Import the lightning alert component.
   

   import LightningAlert from "lightning/alert";
   

2. Write an async function to open LightningAlert. Set the message, theme, and label attributes as per your requirement.
   

   async handleSuccessAlertClick(value) {
       await LightningAlert.open({
           message: "You entered:" + value,
           theme: "success", // a red theme intended for error states
           label: "Success!" // this is the header text
       });
   }
   

3. Call the function handleSuccessAlertClick.

Code Sample for LightningAlert

This code show example for the Error variant, but you can change it as per your requirements.

lightningAlertDemo.js

import { LightningElement } from "lwc";
import LightningAlert from "lightning/alert";

export default class LightningAlertDemo extends LightningElement {
    async handleErrorAlertClick() {
        await LightningAlert.open({
            message: "Add your error message here!",
            theme: "error",
            label: "Error!"
        });
    }
}

lightningAlertDemo.html

<template>
    <lightning-button
        onclick={handleErrorAlertClick}
        label="Show Error Dialog"
    >
    </lightning-button>
</template>

Output

Related Posts

• Creating standard Alert, Confirm, Prompt dialogs in LWC
• How to create a Prompt using LightningPrompt LWC?
• How to create a Confirm dialog using LightningConfirm LWC?

You can find all the code from this post on this GitHub repo: Lightning Dialogs.

Thanks for reading! Let me know in the comments if this was helpful!