Confirm

lightning/confirm

Create a confirm modal within your component that asks the user to respond before they continue.

For Use In

Lightning Experience, Experience Builder Sites, Lightning Out (Beta), Standalone Lightning App

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="confirm" model="lwc" namespace="lightning"}

:::::

:::::tab

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.

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

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

export default class MyApp extends LightningElement {
  async handleConfirmClick() {
    const result = await LightningConfirm.open({
      message: "this is the prompt message",
      variant: "headerless",
      label: "this is the aria-label value",
      // setting theme would have no effect
    });
    //Confirm has been closed
    //result is true if OK was clicked
    //and false if cancel was clicked
  }
}

Design

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.

Component Styling

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.

tip: To view interactive examples, see the Examples tab.

Test Your Component's Confirm Modal

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.

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

import LightningConfirm from 'lightning/confirm';
jest.mock('lightning/confirm');
​
test(() => {
    // Create and appendChild(element)
​
    const buttonEle = element.shadowRoot.querySelector('[data-button]');
    const resultEle = element.shadowRoot.querySelector('[data-result]');
​
    // Mock .open()
    // Pass true if testing when user clicks "OK"
    // Pass false if testing when user clicks "Cancel"
    LightningConfirm.open = jest.fn().mockResolvedValue(true);
    // Initial value
    expect(resultEle.textContent).toBe('unknown');
    // Click modal open button
    buttonEle.click();
​
    // Click handler render cycle
    await Promise.resolve();
    // Render cycle triggered by tracked value {result}
    await Promise.resolve();
​
    // Verify result is set in the template
    expect(resultEle.textContent).toBe('true');
    // Open triggered once
    expect(LightningConfirm.open.mock.calls).toHaveLength(1);
})

:::::

:::::tab ::component-specification{component="confirm" model="lwc" namespace="lightning"}

:::::

::::::