# Open Alert Modal

## Overview <a href="#overview" id="overview"></a>

The Open Alert Modal interaction displays essential information to the user within a modal window. This is a way to notify users about critical updates, potential issues, or required actions.

### **When to Use Alert Modals**

Use an alert modal for these types of messages:

* **Neutral/General Information:** Notify users of changes or updates.
* **Warning:** Deliver critical information to help users avoid problems.
* **Error:** Inform users of critical errors that block progress and require action to resolve

<figure><img src="https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FyMB9ghRkmIdJR4FJXGeU%252F2022-11-03_21-26-21.png%3Falt%3Dmedia%26token%3D0d1be44d-fb56-4060-83f9-67ab8f086e54&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=4c3aa346&#x26;sv=2" alt=""><figcaption></figcaption></figure>

## Configuration <a href="#configuration" id="configuration"></a>

### Accessing the Alert Modal action <a href="#accessing-the-alert-modal-action" id="accessing-the-alert-modal-action"></a>

| Label    | The text displayed in the modal's header.                                                         | Any text string.                                                                                                           |
| -------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Message  | The main content message displayed in the alert modal.                                            | Any text string.                                                                                                           |
| Variant  | Determines the appearance of the alert modal. Controls whether the header is displayed.           | With Header, Without Header (or similar, depending on your actual implementation)                                          |
| Theme    | Sets the color theme for the header (if a header is displayed).                                   | Default, Shade, Inverse, Alt Inverse, Success, Info, Warning, Error, Offline                                               |
| On Close | Allows you to define a subsequent interaction that triggers when the user closes the alert modal. | This likely refers to configuring another interaction (e.g., Navigate, Show Toast, etc.). This is not a simple text value. |

<br>