# Alert
## Setting Up Your Alert
### **1. Choose the Alert's Purpose and Style (Variant)**
The "Variant" property determines your alert's overall appearance and intended message. Select the variant that best suits the type of notification you want to display:
* **Base:** A neutral style for general information, updates, or non-critical notifications. This is a good choice for providing general context or feedback.
* **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.
* **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
### **2. Add a Visual Cue with an Icon (Optional)**
You can add an icon to your alert to visually reinforce the message and make it more noticeable.
* **How to Add:** Select an icon from the components' properties panel options.
* **Icon Choice:** The icon choices will change based on the chosen variant (e.g. a warning icon is more suitable for the warning variant). Choose an icon that is relevant to the alert's message.
### **3.** Apply a Textured Background (Optional)
The "Textured" option adds a subtle texture to the alert's background.
* **Purpose:** This can create a softer, visually distinct appearance compared to a solid background.
* **When to Use:** Consider using a textured background to differentiate alerts from other elements on the page or to add a touch of visual interest
### **4. Make the Alert Dismissible (Optional)**
Enable the "Dismissible" option to allow users to close the alert.
* **How it Works:** A close button ("X") will appear on the alert, allowing users to remove it from the screen.
* **When to Use:** Generally, it is good practice to make alerts dismissible, especially for less critical notifications, so users have control over their experience and can clear the alert once they've acknowledged the message.
### **Style**
Want even more control? Head to the "Style" tab to fine-tune the alert's appearance, overriding the default variant styles. You can adjust colors, fonts, spacing, and more.
***
### 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)
***
## Style
The "Style" tab gives you fine-grained control over your alert's appearance. Here's a breakdown of the styling options:
{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the alert component, creating space between the alert and other elements on the page.
* **Top:** Adjust the space above the alert.
* **Right:** Adjust the space to the right of the alert.
* **Bottom:** Adjust the space below the alert.
* **Left:** Adjust the space to the left of the alert
{% endtab %}
{% tab title="Spacing" %}
Controls the *inner* spacing within the alert, affecting the distance between its content (text and icon) and its border.
* **Padding:** Control the inner spacing between the alert's content and border.
{% endtab %}
{% tab title="Background" %}
Sets the visual appearance of the alert's background.
* **ackground Color:** Set the background color of the alert
* **Linear Gradient:** Apply a linear gradient to the background. You can customize the direction, colors, and transition points of the gradient
{% endtab %}
{% tab title="Text" %}
Styles the appearance of the text within the alert message.
* **Font Size:** Adjust the font size of the alert text.
* **Font Family:** Choose the font family for the alert text.
* **Font Weight:** Set the font weight (e.g., normal, bold).
* **Font Style:** Set the font style (e.g., normal, italic).
* **Text Color:** Set the color of the alert text.
* **Text Alignment:** Align the text within the alert (e.g., left, center, right)
{% endtab %}
{% tab title="Border" %}
Customizes the appearance of the border that surrounds the alert.
* **Border Color:** Set the color of the alert's border.
* **Border Width:** Adjust the thickness of the border.
* **Border Style:** Choose a border style (e.g., solid, dashed, dotted).
* **Border Radius:** Control the roundness of the alert's corners
{% endtab %}
{% tab title="Icon" %}
Styles the icon's appearance within the alert (if an icon is used).
* **Icon Background Color:** Set the background color of the alert icon.
* **Icon Foreground Color:** Set the color of the alert icon.
* **Foreground Color Close Icon:** Set the color of the close icon (if "Is Dismissible" is enabled).
* **Foreground Color Utility:** Set the color of any utility icons within the alert
{% endtab %}
{% endtabs %}
---
# Agent Instructions: 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:
```
GET https://docs.avonnicomponents.com/dynamic-components/components/alert.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.