Alert

lightning:alert

A modal that communicates a state affecting the entire system, not just a feature or page. This component requires API version 54.0 and later.

For Aura components only. For LWC development, use lightning/alert.

For Use In

Lightning Experience, Experience Builder Sites, Lightning Out (Beta), Standalone Lightning App

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.

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.