# 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 %}