# Alert

<figure><img src="/files/0LAN3QEGpBsP3qCam8N5" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the Properties

The `Variant` lets you change the appearance of the component.

* `Base`: Use the info alert when notifying the user of neutral information about the system.

<figure><img src="/files/SXXb3e2nE3CJE5vcpbhb" alt=""><figcaption></figcaption></figure>

* `Warning`: Use the warning variant to warn the user about important system information that deserves caution.

<figure><img src="/files/0lx6lRq4iG9GPiTTOiqv" alt=""><figcaption></figcaption></figure>

* `Error`Use the error variant when alerting the user to a system error requiring immediate attention.

<figure><img src="/files/zUartSIVoOURCgKNdSNx" alt=""><figcaption></figcaption></figure>

* `Offline`: Use the offline alert to inform users that they are not internet-connected.

<figure><img src="/files/jTdoDY2KPdvQy7OJgO3y" alt=""><figcaption></figcaption></figure>

***

## Adding Interactions

No interactions are available.

***

## Styling the Alert

From the Styles panel, you can customize styling attributes for the Alert:&#x20;

* `Text`: to customize text fint weight.
* `Border`: to customize styling for the border.
* `Base`: to customize styling for the Base variant.
* `Error`: to customize styling for the Error variant.
* `Offline`: to customize styling for the Offline variant.
* `Warning`: to customize styling for the Warning variant.

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

***

## Tutorials

The following examples demonstrate some of the available functionality for the Alert component.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Create a custom branding Alert</strong></td><td></td><td></td><td><a href="/files/VEyVF55L54BvlapBkgbs">/files/VEyVF55L54BvlapBkgbs</a></td><td><a href="/pages/fcJnoTlaybGQYFAPQHJd">/pages/fcJnoTlaybGQYFAPQHJd</a></td></tr><tr><td><strong>Create an error Alert dismissible</strong></td><td></td><td></td><td><a href="/files/BzbyzBhviirzkk4yHiP2">/files/BzbyzBhviirzkk4yHiP2</a></td><td><a href="/pages/evLTHZli6SpcOrRPVbEX">/pages/evLTHZli6SpcOrRPVbEX</a></td></tr></tbody></table>

***

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>content</td><td>String</td><td>Text to display for the content of the alert.</td></tr><tr><td>iconName</td><td>String</td><td>The Lightning Design System name of the icon. Specify the name in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed</td></tr><tr><td>isDismissible</td><td>Boolean</td><td>Specify if the alert can be closed.</td></tr><tr><td>variant</td><td>String</td><td>The variant change the apparence of the alert. Valid values include base, error, offline and warning.</td></tr></tbody></table>

### Events

No events are available.

### Styling Hooks

<table><thead><tr><th width="269">Name</th><th>Description</th></tr></thead><tbody><tr><td>Block Start</td><td>Defines the amount of space along the outer starting edge of an element in the block direction.</td></tr><tr><td>Block End</td><td>Defines the amount of space along the outer ending edge of an element in the block direction.</td></tr><tr><td>Inline Start</td><td>Defines the logical inline start margin of an element.</td></tr><tr><td>Inline End</td><td>Defines the logical inline end margin of an element.</td></tr><tr><td>Font Weight</td><td>Defines a font weight for the text.</td></tr><tr><td>Border Color</td><td>Defines a font weight for the text.</td></tr><tr><td>Border Size</td><td>Defines a font weight for the text.</td></tr><tr><td>Border Style</td><td>Define a font weight for the text.</td></tr></tbody></table>

#### For each variant (Base, Error, Offline, Warning)

<table><thead><tr><th width="304">Name</th><th>Description</th></tr></thead><tbody><tr><td>Text Color</td><td>Defines a text color for content.</td></tr><tr><td>Background Color</td><td>Defines a background color and override the default variant color.</td></tr><tr><td>Icon Background Color</td><td>Defines an icon background color.</td></tr><tr><td>Foreground Background Color</td><td>Defines a foreground background color.</td></tr><tr><td>Icon Utility Foreground Color</td><td>Defines an icon utility foreground color.</td></tr><tr><td>Close Icon Foreground Color</td><td>Defines a close icon foreground color if <code>isdismissible</code> property is checked.</td></tr></tbody></table>


---

# 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/flow/flow-components/alert.md?ask=<question>
```

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.