Confirm Modals

Use a confirm modal to ask users to respond before they continue. The confirm modal is displayed as a dialog on top of the page content using an overlay.

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

LightningConfirm is an alternative to the native window.confirm() function, which isn’t supported for cross-origin iframes in Chrome and Safari. Unlike the native confirm function, LightningConfirm.open() doesn’t halt execution on the page, it returns a promise. Use async/await or .then() for any code you want to execute after the confirm modal is closed.

A headerless confirm modal over a darkened org.

This example component creates a button that opens the confirm modal that you see in the screenshot.

1<!-- c/myApp.html -->
2<template>
3  <lightning-button 
4      onclick={handleConfirmClick} 
5      label="Open Confirm Modal">
6  </lightning-button>
7</template>

Import LightningConfirm from lightning/confirm in the JavaScript file of the component that opens the confirm modal. Create and dispatch a LightningConfirm event with message, variant, and label attributes. The .open() function returns a promise that resolves to true when you click OK and false when you click Cancel.

1// c/myApp.js
2import { LightningElement } from "lwc";
3import LightningConfirm from "lightning/confirm";
4
5export default class MyApp extends LightningElement {
6  async handleConfirmClick() {
7    const result = await LightningConfirm.open({
8      message: "This is the confirmation message.",
9      variant: "headerless",
10      label: "This is the aria-label value",
11      // label value isn't visible in the headerless variant
12    });
13    // confirm window has been closed
14  }
15}

The lwc-recipes repo has a miscNotificationModules component that demonstrates confirm modals.

Tip

For information about the attributes for LightningConfirm, see the [Component Reference](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-confirm?type=Specifications.

See Also

Component Reference: lightning/confirm