Alert

The lightning/alert module lets you create an alert modal within your component. Use LightningAlert on your components to communicate a state that affects the entire system, not just a feature or page.

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

Import LightningAlert from the lightning/alert module in the component that will launch the alert modal, and call LightningAlert.open() with your desired attributes.

This example creates an alert modal with an error message and OK button. The .open() function returns a promise that resolves when you click OK.

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

LightningAlert supports the following attributes:

• message: Message text that displays in the alert.
• label: Header text, also used as the aria-label. Default string is Alert.
• 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, LightningAlert uses the default theme. LightningAlert ignores the style attribute.

Code using LightningAlert can be tested by mocking the LightningAlert.open() method.

The example below uses a button to open an alert dialog with text that changes when the alert opens.

The lightning/alert module implements the SLDS prompt blueprint, which follows the WAI-ARIA Authoring Practices for the alert and message dialogs pattern. Like modals, the alert dialog is a focus trap, but it displays with role="alertdialog" to indicate its severity.

Use the keyboard interaction guidelines on the SLDS site. When the dialog opens, focus moves to the header text on the dialog, which has tabindex="-1".

To close the dialog, you can press the Esc key. Alternatively, you can tab to the OK button and press Enter.

lightning/alert observes these roles, states, and properties.

• The section element has role="alertdialog" with an aria-description, which uses the value you provide for the message attribute.
• The aria-labelledby value on the section is set to the ID of the header text. Provide a header text using the label attribute.