---
schema_version: "1"
id: 0c535dd7443539fd8713380ab126d761b44c7e67fceab061dbc0a3c19bda5743
title: Alert
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/alert/lightning-alert.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-alert.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 43dc589c7023be5eb55cf2cc70d0f81607556b0fe329f3231a5cc041c15e750b
products:
  - Lightning Component Reference
---

# Alert

**`lightning/alert`**

Create an alert modal within your component that communicates a state that affects the entire system, not just a feature or page.

**For Use In**

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

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="alert" model="lwc" namespace="lightning"}


:::::

:::::tab

Use the `lightning/alert` module to create and open an alert modal from 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 you use to open the alert modal, and call `LightningAlert.open()` with your attributes.

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

<!-- prettier-ignore-start -->
```html
<!-- c/myApp.html -->
<template>
    <lightning-button onclick={handleAlertClick} label="Open Alert Modal">
    </lightning-button>
</template>
```
<!-- prettier-ignore-end -->

```javascript
import { LightningElement } from "lwc";
import LightningAlert from "lightning/alert";

export default class MyApp extends LightningElement {
  async handleAlertClick() {
    await LightningAlert.open({
      message: "this is the alert message",
      theme: "error", // a red theme intended for error states
      label: "Error!", // this is the header text
    });
    //Alert has been closed
  }
}
```

## Design

This module implements the prompt blueprint in the Salesforce Lightning Design System (SLDS). The prompt adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                         | SLDS 2                                                                                                          |
| :------------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Prompt](https://v1.lightningdesignsystem.com/components/prompt/)                              | [Prompt](https://www.lightningdesignsystem.com/components/prompt/)                                              |
| **For Use In** | Lightning Experience, Experience Builder sites, Lightning Out (Beta), Standalone Lightning app | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Component Styling

Use a combination of attributes to customize the alert modal style.

`LightningAlert` supports these 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 these [options](https://v1.lightningdesignsystem.com/utilities/themes/#site-main-content) 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.

**tip:** To view interactive examples, see the [Examples tab](/docs/platform/lightning-component-reference/guide/lightning-alert.html?type=Example).

## Test Your Alert Component

Test code that use `LightningAlert` by mocking the `LightningAlert.open()` method.

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

<!-- prettier-ignore-start -->
```html
<button data-button onclick={handleClick}>Open Alert</button>
<template if:true={alertViewed}>
    <div data-text>Content Viewed</div>
</template>
<template if:false={alertViewed}>
    <div data-text>Click to View Content</div>
</template>
```
<!-- prettier-ignore-end -->

```javascript
import LightningAlert from 'lightning/alert';
jest.mock('lightning/alert');
​
test(() => {
    // Create and appendChild(element)
​
    const buttonEle = element.shadowRoot.querySelector('[data-button]');
    const textEle = element.shadowRoot.querySelector('[data-text]');
​
    // Mock .open()
    // No value passed since LightningAlert doesn't have a return value
    LightningAlert.open = jest.fn().mockResolvedValue();
    // Initial value
    expect(textEle.textContent).toBe('Click to View Content');
    // Click modal open button
    buttonEle.click();
​
    // Click handler render cycle
    await Promise.resolve();
    // Render cycle triggered by tracked value {result}
    await Promise.resolve();
​
    // Verify alertViewed has updated in template
    expect(textEle.textContent).toBe('Content Viewed');
    // Open triggered once
    expect(LightningAlert.open.mock.calls).toHaveLength(1);
})
```

## Accessibility

The `lightning/alert` module implements the SLDS [prompt blueprint](https://v1.lightningdesignsystem.com/components/prompt/#site-main-content), which follows the [WAI-ARIA Authoring Practices for the alert and message dialogs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). Like modals, the alert dialog is a focus trap, but it specifies `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 by using the `label` attribute.


:::::

:::::tab
::component-specification{component="alert" model="lwc" namespace="lightning"}

:::::

::::::