Create confirm dialogs using LightningConfirm in LWC

Using the browser prompt dialogs is an old fashion. That is why you need to create nice and consistent dialogs for your project that follows your theme. 

Almost all Salesforce projects use the SLDS styles. For that reason, there is a new component in the LWC market for creating confirm dialogs. Let us see an example of it.

Use case

You want confirmation from users before performing some destructive action. For example, deleting a record. So you need to show a confirmation dialog with the click of the delete button. 

The LightningConfirm Component

This component shows a modal popup with a header, message`, and two buttons Ok and cancel. There are three different parameters to this component.

1. message - the message you want to display on dialog.
2. label - this is the header label for the dialog.
3. variant - there are two variants of the confirm dialog default (with header) and headerless (without header).

Steps for creating an alert using LightningConfirm

1. Import the lightning prompt component.

   import LightningConfirm from "lightning/confirm";
   

2. Write an async function to open the dialog.

   async handleConfirmClick() {
       const result = await LightningConfirm.open({
           message: "Are you sure you want to delete this?",
           variant: "default", // headerless
           label: "Delete a record"
       });
   
       //Confirm has been closed
   
       //result is true if OK was clicked
       if (result) {
           //go ahead and delete
       } else {
           //do something else 
       }
   }
   

3. Call the function handleConfirmClick().

Complete Code Sample for Lightning

lightningConfirmDemo.js

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

export default class LightningConfirmDemo extends LightningElement {
    async handleConfirmClick() {
        const result = await LightningConfirm.open({
            message: "Are you sure you want to delete this?",
            variant: "default", // headerless
            label: "Delete a record"
        });

        //Confirm has been closed

        //result is true if OK was clicked
        if (result) {
            this.handleSuccessAlertClick();
        } else {
            //and false if cancel was clicked
            this.handleErrorAlertClick();
        }
    }

    async handleSuccessAlertClick() {
        await LightningAlert.open({
            message: `You clicked "Ok"`,
            theme: "success",
            label: "Success!"
        });
    }

    async handleErrorAlertClick() {
        await LightningAlert.open({
            message: `You clicked "Cancel"`,
            theme: "error",
            label: "Error!"
        });
    }
}

This post does not include the code for deleting records. I have covered the delete record example code in this post here DeleteRecord example in LWC.

lightningConfirmDemo.js

<template>
    <lightning-button
        variant="brand"
        onclick={handleConfirmClick}
        label="Delete Something"
    >
    </lightning-button>
</template>

Output

Related Posts

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

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

I hope this was helpful. Did you like this new component? Let me know in the comments.
Thanks for reading!