> 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-button-dialog.md).

# AX - Boîte de dialogue de bouton

## Aperçu

**AX - Boîte de dialogue de bouton** est un composant Experience Cloud qui ouvre une fenêtre contextuelle modale lorsqu’on clique dessus sur les pages Experience Sites, affichant du contenu sans rediriger les utilisateurs hors de leur page actuelle.

Utilisez-le pour afficher des détails supplémentaires, du contenu vidéo, des messages de confirmation, des formulaires ou des avertissements qui apparaissent dans une superposition. Placez n’importe quel composant Experience Cloud dans la fenêtre modale pour créer le contenu de la fenêtre contextuelle dans Experience Builder.

Parfait pour les détails « En savoir plus », les démonstrations vidéo, les conditions générales, les demandes de confirmation, ou tout contenu qui doit apparaître temporairement au-dessus de la page actuelle dans votre portail.

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

***

## Configuration de la boîte de dialogue du bouton Avonni

### **Rendre votre boîte de dialogue de bouton géniale**

1. **Ajouter le composant :** Trouvez le composant Boîte de dialogue de bouton Avonni et faites-le glisser sur votre site web.
2. **Le faire paraître génial :** Vous pouvez modifier le texte du bouton (l’étiquette), le style de couleur (la variante) et tout autre détail visuel que vous aimez.
3. **Cliquez et créez :** Une fenêtre contextuelle (une modale) apparaîtra lorsque vous cliquerez sur le bouton. Vous pouvez faire glisser toutes sortes de choses intéressantes dans cette boîte, comme le composant Vidéo Avonni ou d’autres éléments sympas.

### **Paramètres supplémentaires**

* **Masquer l’en-tête :** Cela supprime la barre de titre en haut de la fenêtre contextuelle.
* **Taille :** Choisissez la taille, grande ou petite, que vous souhaitez pour la fenêtre contextuelle.
* **Afficher le pied de page :** Ajoute une section en bas de la fenêtre contextuelle – idéal pour des boutons comme « OK » ou « Annuler ».
* **Rembourrage de retrait du contenu :** Cela contrôle l’espace entre le contenu à l’intérieur de la boîte et les bords de la boîte.

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

***

## Paramètres

{% tabs %}
{% tab title="Configuration du bouton" %}

| Nom                       | Description                                                                                                                 |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| **Libellé**               | Texte affiché sur le bouton.                                                                                                |
| **Nom de l’icône**        | Le nom, selon le Lightning Design System, de l’icône à afficher sur le bouton.                                              |
| **Position de l’icône**   | La position de l’icône par rapport à l’étiquette ; les options sont « left » ou « right ».                                  |
| **Variante**              | Définit l’apparence du bouton, comme « brand », « neutral », etc., selon les styles prédéfinis du Salesforce Design System. |
| **Alignement horizontal** | Aligne le bouton horizontalement dans son conteneur ; les options incluent « left », « center » ou « right ».               |
| **Étirement**             | Détermine si le bouton doit s’étendre pour remplir la largeur de son conteneur.                                             |
| **Désactivé**             | Désactive le bouton, empêchant toute interaction de l’utilisateur.                                                          |
| {% endtab %}              |                                                                                                                             |

{% tab title="Configuration de la boîte de dialogue" %}

| Nom                          | Description                                                                                                   |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------- |
| **Masquer l’en-tête**        | Bascule la visibilité de l’en-tête de la boîte de dialogue.                                                   |
| **Taille**                   | Définit la taille de la boîte de dialogue ; les options peuvent inclure '`petit`', '`moyen`', ou '`grand`.    |
| **Afficher le pied de page** | Détermine s’il faut afficher le pied de page de la boîte de dialogue, qui peut contenir des boutons d’action. |
| {% endtab %}                 |                                                                                                               |

{% tab title="🎨 Style" %}

| Nom              | Description                                                                          |
| ---------------- | ------------------------------------------------------------------------------------ |
| **En-tête**      | Spécifie la couleur de fond de l’en-tête de la boîte de dialogue.                    |
| **Contenu**      | Définit la couleur de fond de la zone de contenu principale de la boîte de dialogue. |
| **Pied de page** | Définit la couleur de fond de la zone de pied de page.                               |
| {% 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-button-dialog.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.
