# Alert

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FCs73htjWRolN8oMbalyA%2Fimage%20(87).avif?alt=media&#x26;token=3056c747-53e5-466e-9ab5-a020c176ac10" 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="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FKYw1pLAzI6u7ah1uqWLH%2F2022-11-03_15-33-51.png?alt=media&#x26;token=9075f460-5b59-4d89-9903-b4b0de261ba6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FaGy2Q2V8wYviI5JK8h5F%2F2022-11-03_15-34-24.png?alt=media&#x26;token=dfd7fff3-4dc8-4733-9c2d-60283505164f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F7WY62Ajg91nyFhBeqbzk%2F2022-11-03_15-34-59.png?alt=media&#x26;token=73289d94-b2e0-4ba9-ac7d-b4dfc672fead" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FXjjubaHdBwr5MeendyZN%2F2022-11-03_15-27-10.png?alt=media&#x26;token=483f4e5f-4bd6-4904-a559-23e49b7429e5" 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](https://docs.avonnicomponents.com/flow/component-builder/style-panel).

***

## 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="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FLrIWbT5qhqPZakNgZUiJ%2Fwarning.png?alt=media&#x26;token=7d6c3615-ed76-4858-94f0-a49f4c71ed76">warning.png</a></td><td><a href="../tutorials/components/alert/create-a-custom-branding-alert">create-a-custom-branding-alert</a></td></tr><tr><td><strong>Create an error Alert dismissible</strong></td><td></td><td></td><td><a href="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FKl2VIX5jBlxOFlemIA7P%2FerrorWarning.png?alt=media&#x26;token=3735ce52-3390-4881-bf51-790900988ddb">errorWarning.png</a></td><td><a href="../tutorials/components/alert/create-an-error-alert-dismissible">create-an-error-alert-dismissible</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>