Alert Modals

Use an alert modal to halt users and communicate an urgent error that’s affecting their system, feature, or page. To display an alert modal in Lightning Experience, import LightningAlert from the lightning/alert module, and call LightningAlert.open() with your desired attributes.

This alert modal is an alternative to the native window.alert() function, which isn’t supported for cross-origin iframes in Chrome and Safari. Unlike the native alert function, LightningAlert.open() 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 modal is closed.

An alert modal with a read header over a darkened org.

This example component creates a button that opens the alert modal UI that you see in the screenshot. Typically, an error condition would trigger display of the alert modal.

Import LightningAlert from lightning/alert in the JavaScript file of the component that opens the alert modal. Create and dispatch a LightningAlert event with message, theme, and label attributes. The .open() function returns a promise that resolves when you click OK.

For information about the attributes for the alert modal, see the Component Reference.

See Also