Confirm

The lightning:confirm library lets you create an confirm modal within your component. Use .openConfirm in your components to ask the user to provide information before they continue.

Use lightning:confirm instead of the native window.confirm() for a more consistent user experience. They have similar functions, but lightning:confirm works in cross-origin iframes, where the .confirm() method is no longer supported in Chrome and Safari. Unlike window.confirm(), .openConfirm 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 has closed.

To create a confirm in your Aura component, import lightning:confirm, and call .openConfirm. Define the confirm’s style in the component helper.

1<aura:component>
2  <aura:import library="lightning:confirm" property="LightningConfirm" />
3  <lightning:button onclick="{! c.openConfirm }" label="Open Confirm" />
4</aura:component>

1/* c:myAppController.js */
2({
3  openConfirm: function (cmp, event, helper) {
4    helper.openConfirm(cmp, event);
5  },
6});

1/* c:myAppHelper.js */
2({
3  openConfirm: function (cmp, event) {
4    this.LightningConfirm.open({
5      message: "this is the confirm message",
6      theme: "warning",
7      label: "Please Confirm",
8    }).then(function (result) {
9      // result is true if clicked "OK"
10      // result is false if clicked "Cancel"
11      console.log("confirm result is", result);
12    });
13  },
14});

This component uses the Salesforce Lightning Design System (SLDS) prompt blueprint .

LightningConfirm supports the following 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:

• message: Message text that displays in the prompt.
• 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, lightning:prompt uses the default theme.