Alert Modals

Use an alert modal to halt users and communicate an urgent error that’s affecting their system, feature, or page. The alert is displayed in a dialog on top of the page content using an overlay.

To display an alert modal in Lightning Experience, import LightningAlert from the lightning/alert module, and call LightningAlert.open() with your desired attributes.

LightningAlert 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 alert window is closed.

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

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

1<!-- c/myApp.html -->
2<template>
3  <lightning-button 
4      onclick={handleAlertClick} 
5      label="Open Alert Modal"> 
6  </lightning-button>
7</template>

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.

1// c/myApp.js
2import { LightningElement } from "lwc";
3import LightningAlert from "lightning/alert";
4
5export default class MyApp extends LightningElement {
6  async handleAlertClick() {
7    await LightningAlert.open({
8      message: "This is the alert message.",
9      theme: "error", // a red theme intended for error states
10      label: "Error!", // this is the header text
11    });
12    // alert notification has been closed
13  }
14}

The lwc-recipes repo has a miscNotificationModules component that demonstrates alert notifications.

Tip

For information about the attributes for LightningAlert, see the [Component Reference](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-alert?type=Specifications.

See Also

Component Reference: lightning/alert