> 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 du bouton
## Aperçu
**AX - Boîte de dialogue du bouton** est un composant Experience Cloud qui ouvre une fenêtre contextuelle modale lorsqu'on clique dessus sur les pages des sites Experience, affichant du contenu sans quitter la page actuelle des utilisateurs.
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 à l'intérieur de 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 de votre portail.
## Configuration
### **Rendre votre boîte de dialogue de bouton attrayante**
1. **Ajouter le composant :** Trouvez le composant Avonni Button Dialog et faites-le glisser sur votre site web.
2. **Le rendre superbe :** Vous pouvez modifier le texte du bouton (le libellé), le style de couleur (la variante) et tous les autres détails visuels que vous souhaitez.
3. **Cliquez et créez :** Une boîte contextuelle (une fenêtre modale) apparaîtra lorsque vous cliquerez sur le bouton. Vous pouvez faire glisser toutes sortes de contenus sympas dans cette boîte, comme le composant Avonni Video ou d'autres éléments intéressants.
### Configuration du bouton
**Libellé** est le texte affiché sur le bouton.
**Nom de l'icône** est l'icône Lightning Design System affichée sur le bouton. **Position de l'icône** la place à `à gauche` ou `à droite` du libellé.
**Variante** définit l'apparence du bouton (`brand`, `neutre`, et ainsi de suite) selon les styles prédéfinis du Salesforce Design System.
**Alignement horizontal** aligne le bouton dans son conteneur — `à gauche`, `au centre`, ou `à droite`.
**Étendre** étend le bouton pour qu'il occupe toute la largeur de son conteneur.
**Désactivé** désactive le bouton, empêchant toute interaction de l'utilisateur.
**Texte alternatif** fournit un texte accessible décrivant le bouton lorsqu'il n'affiche qu'une icône.
### Configuration de la boîte de dialogue
**Masquer l'en-tête** supprime la barre de titre en haut de la boîte contextuelle.
**Taille** définit la taille de la boîte contextuelle (`petit`, `moyen`, ou `grand`).
**Afficher le pied de page** ajoute une section en bas de la boîte contextuelle — idéale pour des boutons comme « OK » ou « Annuler ».
**Marge intérieure du contenu** contrôle l'espace entre le contenu à l'intérieur de la boîte et ses bordures.
## Style
{% tabs %}
{% tab title="Espacement" %}
Contrôle l'espace autour du bouton (haut / bas / gauche / droite).
{% endtab %}
{% tab title="Arrière-plan" %}
* **Couleur / Couleur active / Couleur au survol :** Définissez la couleur d'arrière-plan du bouton pour les états par défaut, actif et au survol.
{% endtab %}
{% tab title="Libellé/Icône" %}
* **Couleur / Couleur active / Couleur au survol :** Définissez la couleur du libellé et de l'icône pour les états par défaut, actif et au survol.
* **Taille de police / Style de police / Graisse de police / Famille de police / Interligne :** Contrôlez la typographie du libellé.
* **Alignement horizontal :** Alignez le libellé et l'icône.
{% endtab %}
{% tab title="Bordure" %}
* **Couleur / Couleur active / Couleur au survol :** Définissez la couleur de la bordure pour les états par défaut, actif et au survol.
* **Taille / Style / Rayon :** Contrôlez la bordure du bouton.
{% endtab %}
{% tab title="Couleur d'arrière-plan de la boîte de dialogue" %}
| Nom | Description |
| ---------------- | ------------------------------------------------------------------------------------------- |
| **En-tête** | Spécifie la couleur d'arrière-plan de l'en-tête de la boîte de dialogue. |
| **Contenu** | Définit la couleur d'arrière-plan de la zone de contenu principale de la boîte de dialogue. |
| **Pied de page** | Définit la couleur d'arrière-plan 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, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-button-dialog.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.