# AX - Alerte

## Aperçu

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

Utilisez-le pour afficher des alertes système, des messages d'erreur, des avertissements, des confirmations de succès 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 d'envoi de formulaires, les alertes de statut de compte ou pour guider les utilisateurs lors de processus sur les portails clients ou partenaires.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZnVzrugiVWNIORtCCQYM%2F2023-11-13_14-29-57.png?alt=media&#x26;token=26eff8e7-3d4e-4c0e-bf41-9af78984b4a8" 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 pour 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 des alertes qui nécessitent une attention mais ne sont pas critiques.</li></ul><p>Choisissez une variante qui s'aligne sur le message que vous souhaitez transmettre pour une compréhension utilisateur plus claire.</p></td></tr><tr><td><strong>Contenu</strong></td><td>L'attribut « content » spécifie le message principal ou l'information que vous souhaitez transmettre dans le composant Avonni Alert. Il contient le contenu textuel qui sera affiché dans l'alerte, veillant à ce que les utilisateurs soient informés ou alertés 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, améliorant la clarté et attirant 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>: Très très petit pour une emphase subtile.</li><li><strong>Xs</strong>: Très petit pour une faible prominence.</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>Est dismissible</strong></td><td>L'attribut « Est dismissible » permet aux utilisateurs de fermer ou de rejeter l'Avonni Alert sur l'interface. Lorsqu'il est activé, un bouton de fermeture apparaît sur l'alerte, permettant à l'utilisateur de la supprimer manuellement.</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 du fond :</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 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 la personnalisation du texte :</p><ul><li><strong>Couleur</strong>: Changez la couleur du texte pour une meilleure visibilité.</li><li><strong>Épaisseur de la police</strong>: Choisissez le poids de la police pour l'accentuation.</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 la 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" %}
certaines attributs de style peuvent être dynamiques....
{% endhint %}
{% endtab %}
{% endtabs %}