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
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.
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 | Prompt |
| For Use In | Lightning Experience, Experience Builder sites, Lightning Out (Beta), Standalone Lightning app | Lightning Experience |
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 thearia-label. Default string isConfirm.variant: Two values,headerandheaderless. Default value isheader.theme: Color theme for the header. Thethemeattribute supports the following options from SLDS:default: whiteshade: grayinverse: dark bluealt-inverse: darker bluesuccess: greeninfo: gray-ish bluewarning: yellowerror: redoffline: black
If an invalid value is provided, LightningConfirm uses the default theme. LightningConfirm ignores the style attribute.
To view interactive examples, see the Examples tab.
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.