> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-alert.md).

# AX - Alert

## Overview

**AX - Alert** is an Experience Cloud component that displays important messages and notifications to portal users on Experience Sites pages.

Use it to show system alerts, error messages, warnings, success confirmations, or time-sensitive announcements. Control when alerts appear, what they say, and how they look—all configured in Experience Builder without code.

Perfect for portal maintenance notices, form submission confirmations, account status alerts, or guiding users through processes on customer or partner portals.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-36209c85f8368a940645aedacfb9a149977ac7ec%2F2023-11-13_14-29-57.png?alt=media" alt=""><figcaption></figcaption></figure>

## Configuration

### Properties

**Variant** customizes the appearance of the alert to better reflect the type of message you're conveying. Choose the one that aligns with the message you aim to deliver for clearer user comprehension:

| Variant     | When to Use                                         |
| ----------- | --------------------------------------------------- |
| **Base**    | A standard, general-purpose alert.                  |
| **Error**   | For critical notifications or issues.               |
| **Offline** | Indicates connectivity or availability concerns.    |
| **Warning** | For alerts that need attention but aren't critical. |

**Content** is the primary message conveyed in the alert, ensuring users are informed of the specific notification or situation. For richer messages, you can instead supply custom markup through the component's content slot.

**Icon Name** sets a Lightning Design System icon for the alert (for example `utility:info`), visually representing the nature or context of the message. **Icon Size** controls how large the icon appears — XX-Small, X-Small, Small, Medium, or Large — and requires an **Icon Name**.

**Is Dismissible** shows a close button so users can manually dismiss the alert. Enable it when the message is informational and users should be able to move past it.

**Textured** applies a textured background pattern to the alert for a more distinctive appearance.

## Styling

Customize the alert's appearance from the **Style** section of the property editor.

{% tabs %}
{% tab title="Spacing" %}
Adjusts the alert's margins:

* **Block Start:** Set the top margin.
* **Block End:** Adjust the bottom margin.
* **Inline Start:** Configure the left margin.
* **Inline End:** Modify the right margin.
  {% endtab %}

{% tab title="Background" %}
Provides backdrop customization:

* **Color:** Select a solid color for the background.
* **Linear Gradient:** Choose this option for a dynamic, visually appealing gradient effect.
  {% endtab %}

{% tab title="Text" %}
Allows for text customization:

* **Color:** Change the text color for improved visibility.
* **Font Weight:** Choose the weight of the font for emphasis.
* **Horizontal Alignment:** Select the text's alignment for optimal display in the alert.
  {% endtab %}

{% tab title="Border" %}
Offers options to customize the border's appearance:

* **Color:** Choose a color for the border's edge.
* **Size:** Select the thickness of the border.
* **Style:** Determine the overall look and feel with various styles.
  {% endtab %}

{% tab title="Icon" %}
Allows for various customizations of the icon's appearance:

* **Background Color:** Alter the background color behind the icon.
* **Foreground Color:** Change the main color of the icon.
* **Foreground Close Icon:** Specify the icon's color to close the alert.
* **Foreground Color Utility:** Make further color adjustments for better visibility and contrast.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-alert.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.