---
schema_version: "1"
id: fe49fbb46d32a70f44e8200f193c36fe20ff121f36c2b5e7bf27bd799eaa6120
title: Confirm
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/confirm/lightning-confirm.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-confirm.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 7ca6a56e27cced5d87fb1dd55ba429ff78a3d83f411e3840bf2d833240483321
products:
  - Lightning Component Reference
---

# 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**.

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

```javascript
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.

|                | SLDS 1                                                                                         | SLDS 2                                                                                                          |
| :------------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Prompt](https://v1.lightningdesignsystem.com/components/prompt/)                              | [Prompt](https://www.lightningdesignsystem.com/components/prompt/)                                              |
| **For Use In** | Lightning Experience, Experience Builder sites, Lightning Out (Beta), Standalone Lightning app | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## 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](https://v1.lightningdesignsystem.com/utilities/themes/#site-main-content) 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](/docs/platform/lightning-component-reference/guide/lightning-confirm.html?type=Example).

## 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.

<!-- prettier-ignore-start -->
```html
<button data-button onclick={handleClick}>Open Confirm</button>
<div data-result>{result}</div>
```
<!-- prettier-ignore-end -->

```js
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"}

:::::

::::::