> 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/experience-cloud/experience-cloud-fr/experience-components/ax-alert.md).

# AX - Alerte

## Aperçu

**AX - Alerte** est un composant Experience Cloud qui affiche des messages et des notifications importants aux utilisateurs du portail sur les pages des sites Experience.

Utilisez-le pour afficher des alertes système, des messages d'erreur, des avertissements, des confirmations de réussite ou des annonces sensibles au temps. Contrôlez quand les alertes apparaissent, ce qu'elles disent et leur apparence — le tout configuré dans Experience Builder sans code.

Parfait pour les avis de maintenance du portail, les confirmations de soumission de formulaires, les alertes d'état de compte ou pour guider les utilisateurs à travers des processus sur les portails clients ou partenaires.

<figure><img src="/files/8510be6fcbb952d1bcf2a2481ec7a33c47cb7459" alt=""><figcaption></figcaption></figure>

***

## Paramètres

{% tabs %}
{% tab title="🎛️ Propriétés" %}

<table><thead><tr><th width="183">Attribut</th><th>Description</th></tr></thead><tbody><tr><td><strong>Variante</strong></td><td><p>L'attribut « variant » vous permet de personnaliser l'apparence du composant Avonni Alert afin de mieux refléter le type d'alerte que vous transmettez. Les variantes disponibles incluent :</p><ul><li><strong><code>erreur</code></strong>: Pour les notifications ou problèmes critiques.</li><li><strong><code>base</code></strong>: Une alerte standard à usage général.</li><li><strong><code>hors ligne</code></strong>: Indique des problèmes de connectivité ou de disponibilité.</li><li><strong><code>avertissement</code></strong>: Pour les alertes qui nécessitent de l'attention mais ne sont pas critiques.</li></ul><p>Choisissez une variante qui correspond au message que vous souhaitez diffuser afin d'assurer une meilleure compréhension par l'utilisateur.</p></td></tr><tr><td><strong>Contenu</strong></td><td>L'attribut « content » spécifie le message principal ou les informations que vous souhaitez transmettre dans le composant Avonni Alert. Il contient le contenu textuel qui sera affiché dans l'alerte, garantissant que les utilisateurs sont informés ou conscients de la notification ou de la situation spécifique.</td></tr><tr><td><strong>Nom de l’icône</strong></td><td>L'attribut « icon name » vous permet de définir une icône spécifique pour le composant Avonni Alert. En fournissant un nom d'icône, vous pouvez représenter visuellement la nature ou le contexte de l'alerte, ce qui améliore la clarté et attire immédiatement l'attention de l'utilisateur sur le message.</td></tr><tr><td><strong>Taille de l’icône</strong></td><td><p>L'attribut « icon size » dans le composant Avonni Alert contrôle la taille de l'icône :</p><ul><li><strong>Xxs</strong>: Extra-extra-petit pour une discrète mise en valeur.</li><li><strong>Xs</strong>: Extra-petit pour une présence minimale.</li><li><strong>Petit</strong>: Une taille modeste pour une visibilité modérée.</li><li><strong>Moyen</strong>: Taille standard pour une visibilité équilibrée.</li><li><strong>Grand</strong>: Pour un impact visuel maximal</li></ul></td></tr><tr><td><strong>Peut être ignoré</strong></td><td>L'attribut « Is Dismissible » permet aux utilisateurs de fermer ou de masquer l'alerte Avonni dans l'interface. Lorsqu'il est activé, un bouton de fermeture apparaît sur l'alerte, permettant une suppression manuelle par l'utilisateur.</td></tr></tbody></table>
{% endtab %}

{% tab title="🎨 Style" %}

<table><thead><tr><th width="183">Attribut</th><th>Description</th></tr></thead><tbody><tr><td><strong>Espacement</strong></td><td><p>Le paramètre de style d'espacement dans le composant Avonni Alert vous permet d'ajuster les marges :</p><ul><li><strong>Début du bloc</strong>: Définissez la marge supérieure.</li><li><strong>Fin du bloc</strong>: Ajustez la marge inférieure.</li><li><strong>Début en ligne</strong>: Configurez la marge gauche.</li><li><strong>Fin en ligne</strong>: Modifiez la marge droite</li></ul></td></tr><tr><td><strong>Arrière-plan</strong></td><td><p>Le paramètre de style d'arrière-plan dans le composant Avonni Alert offre une personnalisation de l'arrière-plan :</p><ul><li><strong>Couleur</strong>: Sélectionnez une couleur unie pour l'arrière-plan.</li><li><strong>Dégradé linéaire</strong>: Choisissez cette option pour un effet de dégradé dynamique et visuellement attrayant</li></ul></td></tr><tr><td><strong>Texte</strong></td><td><p>Le paramètre de style du texte dans le composant Avonni Alert permet de personnaliser le texte :</p><ul><li><strong>Couleur</strong>: Modifiez la couleur du texte pour améliorer la visibilité.</li><li><strong>Graisse de police</strong>: Choisissez le poids de la police pour mettre l'accent.</li><li><strong>Alignement horizontal</strong>: Sélectionnez l'alignement du texte pour un affichage optimal dans l'alerte</li></ul></td></tr><tr><td><strong>Bordure</strong></td><td><p>Le paramètre de style de bordure dans le composant Avonni Alert offre des options pour personnaliser l'apparence de la bordure :</p><ul><li><strong>Couleur</strong>: Choisissez une couleur pour le bord de la bordure.</li><li><strong>Taille</strong>: Sélectionnez l'épaisseur de la bordure.</li><li><strong>Style</strong>: Déterminez l'apparence générale avec différents styles</li></ul></td></tr><tr><td><strong>Icône</strong></td><td><p>Le paramètre de style de l'icône dans le composant Avonni Alert permet diverses personnalisations de l'apparence de l'icône :</p><ul><li><strong>Couleur d’arrière-plan</strong>: Modifiez la couleur d'arrière-plan derrière l'icône.</li><li><strong>Couleur de premier plan</strong>: Changez la couleur principale de l'icône.</li><li><strong>Icône de fermeture au premier plan</strong>: Spécifiez la couleur de l'icône pour fermer l'alerte.</li><li><strong>Utilitaire de couleur de premier plan</strong>: Effectuez d'autres ajustements de couleur pour une meilleure visibilité et un meilleur contraste</li></ul></td></tr></tbody></table>

{% hint style="info" %}
certains attributs de style peuvent être dynamiques....
{% endhint %}
{% 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-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.