Confirm

The lightning/confirm module creates a confirm modal within your component. Use LightningConfirm on your component to ask the user to respond before they continue.

Use LightningConfirm.open() instead of the native window.confirm() for a more consistent user experience. They have similar functions, but LightningConfirm.open() works in cross-origin iframes, where the .confirm() method is no longer supported in Chrome and Safari. Unlike window.confirm(), LightningConfirm.open() doesn’t halt execution on the page, it returns a Promise. Use async/await or .then() for any code you want to run after the confirm has closed.

Import LightningConfirm from the lightning/confirm module in the component that opens the confirm modal, and call LightningConfirm.open() with your attributes.

This example creates a headerless confirm modal with two buttons, OK and Cancel. The .open() function returns a promise that resolves to true when you click OK and false when you click Cancel.

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

1import { LightningElement } from "lwc";
2import LightningConfirm from "lightning/confirm";
3
4export default class MyApp extends LightningElement {
5  async handleConfirmClick() {
6    const result = await LightningConfirm.open({
7      message: "this is the prompt message",
8      variant: "headerless",
9      label: "this is the aria-label value",
10      // setting theme would have no effect
11    });
12    //Confirm has been closed
13    //result is true if OK was clicked
14    //and false if cancel was clicked
15  }
16}

This module implements the prompt blueprint in the Salesforce Lightning Design System (SLDS). The prompt adapts to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

Use a combination of attributes to customize the confirm modal style.

LightningConfirm supports these attributes:

• message: Message text that displays in the confirm.
• label: Header text, also used as the aria-label. Default string is Confirm.
• variant: Two values, header and headerless. Default value is header.
• theme: Color theme for the header. The theme attribute supports the following options from SLDS:
  • default: white
  • shade: gray
  • inverse: dark blue
  • alt-inverse: darker blue
  • success: green
  • info: gray-ish blue
  • warning: yellow
  • error: red
  • offline: ​black​

If an invalid value is provided, LightningConfirm uses the default theme. LightningConfirm ignores the style attribute.

Code using LightningConfirm can be tested by mocking the LightningConfirm.open() method.

The example below uses a button to open a confirm dialog and sets the result in a template.

1<button data-button onclick={handleClick}>Open Confirm</button>
2<div data-result>{result}</div>

1import LightningConfirm from 'lightning/confirm';
2jest.mock('lightning/confirm');
3​
4test(() => {
5    // Create and appendChild(element)
6​
7    const buttonEle = element.shadowRoot.querySelector('[data-button]');
8    const resultEle = element.shadowRoot.querySelector('[data-result]');
9​
10    // Mock .open()
11    // Pass true if testing when user clicks "OK"
12    // Pass false if testing when user clicks "Cancel"
13    LightningConfirm.open = jest.fn().mockResolvedValue(true);
14    // Initial value
15    expect(resultEle.textContent).toBe('unknown');
16    // Click modal open button
17    buttonEle.click();
18​
19    // Click handler render cycle
20    await Promise.resolve();
21    // Render cycle triggered by tracked value {result}
22    await Promise.resolve();
23​
24    // Verify result is set in the template
25    expect(resultEle.textContent).toBe('true');
26    // Open triggered once
27    expect(LightningConfirm.open.mock.calls).toHaveLength(1);
28})