Alert

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

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

To create an alert in your Aura component, import lightning:alert, and call .openAlert. Define the alert’s style in the component helper.

1<aura:component>
2  <aura:import library="lightning:alert" property="LightningAlert" />
3  <lightning:button onclick="{! c.openAlert }" label="Open Alert" />
4</aura:component>

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

1/* c:myAppHelper.js */
2({
3  openAlert: function (cmp, event) {
4    this.LightningAlert.open({
5      message: "this is the alert message",
6      theme: "error",
7      label: "Error!",
8    }).then(function () {
9      console.log("alert is closed");
10    });
11  },
12});

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

LightningAlert supports the following attributes:

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

lightning:alert 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.