> 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/dynamic-components/components/alert.md).
# Alert
The Alert component is a simple way to display important messages to users. Think of it like a helpful notification that grabs their attention when something needs to be highlighted — informational notices, warnings, errors, or offline states.
## Overview
The Alert component communicates contextual feedback in a clear, visually distinct way. Pick a variant to match the type of message, add an optional icon to reinforce it, write your message as rich text, and decide whether users can dismiss it. The sections below follow the configuration panel from top to bottom, so you can read along as you build.
### Tutorials
The following examples demonstrate some of the available functionality for the Alert component.
[**Create a custom branding Alert**](https://flow.avonnicomponents.com/tutorials/components/alert/create-a-custom-branding-alert)[**Create an error Alert dismissible**](https://flow.avonnicomponents.com/tutorials/components/alert/create-an-error-alert-dismissible)
## Configuration
To configure the Alert, select it on the canvas. The **Edit Alert** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab.
### Properties
#### Variant
The **Variant** setting determines your alert's overall appearance and intended message. Select the variant that best suits the type of notification you want to display:
* **Base (default):** A neutral style for general information, updates, or non-critical notifications. This is a good choice for providing general context or feedback.
* **Error:** A critical style that indicates a serious problem or error that requires immediate attention and action from the user.
* **Offline:** A specific style to inform the user that they have lost their internet connection.
* **Warning:** A more prominent style used to capture the user's attention. Use this for important system messages, cautions, or situations requiring user awareness but not immediate action.
#### Icon Name
Add an icon to your alert to visually reinforce the message and make it more noticeable. Use the **Icon Name** setting to pick a Lightning Design System icon. Choose an icon that is relevant to the alert's message — for example, a warning icon pairs naturally with the Warning variant.
#### Icon Size
The **Icon Size** setting controls how large the icon appears. Choose from **Xxs**, **Xs**, **Small** (default), **Medium**, or **Large**.
Requires: **Icon Name** to be set.
#### Content
The **Content** setting holds the alert's message. It accepts rich text, so you can format the message — bold, links, and more — to suit your needs.
#### Textured
Enable the **Textured** setting to add a subtle texture to the alert's background. This can create a softer, visually distinct appearance compared to a solid background — useful to differentiate alerts from other elements on the page or to add a touch of visual interest.
#### Is Dismissible
Enable the **Is Dismissible** setting to allow users to close the alert. A close button ("X") appears on the alert, letting users remove it from the screen. It is generally good practice to make alerts dismissible, especially for less critical notifications, so users can clear the alert once they've acknowledged the message.
### Set Component Visibility
All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).
## Styling
The **Style** tab gives you fine-grained control over your alert's appearance, overriding the default variant styles. Configure it from the **Style** tab of the Edit Alert panel.
{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the alert component, creating space between the alert and other elements on the page.
* **Top / Right / Bottom / Left:** Adjust the space on each side of the alert.
{% endtab %}
{% tab title="Padding" %}
Controls the *inner* spacing between the alert's content (text and icon) and its border.
* **Top / Bottom / Left / Right:** Adjust the inner spacing on each side.
{% endtab %}
{% tab title="Size" %}
Controls the alert's dimensions.
* **Width / Height:** Set fixed dimensions for the alert.
* **Overflow:** Control how content that exceeds the bounds is handled.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
{% endtab %}
{% tab title="Border" %}
Customizes the border surrounding the alert.
* **Color:** Set the color of the alert's border.
* **Size:** Adjust the thickness of the border.
* **Style:** Choose a border style (e.g., solid, dashed, dotted).
* **Radius:** Control the roundness of the alert's corners.
{% endtab %}
{% tab title="Background" %}
Sets the alert's background. **Color** is set per variant (Base, Warning, Error, Offline).
* **Color:** Set the background color of the alert.
* **Linear Gradient:** Apply a gradient background image.
{% endtab %}
{% tab title="Text" %}
Styles the alert message text. **Color** is set per variant (Base, Warning, Error, Offline).
* **Color:** Set the color of the alert text.
* **Font Size / Font Style / Font Weight:** Control the message typography.
* **Horizontal Alignment:** Align the text within the alert.
* **Line Clamp:** Limit the message to a maximum number of lines.
{% endtab %}
{% tab title="Icon" %}
Styles the icon within the alert. Colors are set per variant (Base, Warning, Error, Offline).
* **Background Color:** Set the icon's background color.
* **Foreground Color:** Set the icon's color.
* **Foreground Color Close Icon:** Set the color of the close (dismiss) icon, when **Is Dismissible** is enabled.
{% 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/dynamic-components/components/alert.md?ask=&goal=
```
`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.