> 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 - Dialogue du bouton
## Aperçu
**AX - Boîte de dialogue du bouton** est un composant Experience Cloud qui ouvre une fenêtre modale lorsqu'on clique dessus sur les pages des sites Experience, affichant du contenu sans éloigner les utilisateurs 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 à l'intérieur de la 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.
## Configuration
### **Rendre votre boîte de dialogue de bouton géniale**
1. **Ajouter le composant :** Trouvez le composant Avonni Button Dialog et faites-le glisser sur votre site web.
2. **Rendez-le superbe :** Vous pouvez modifier le texte du bouton (le libellé), le style de couleur (la variante) et tout autre détail visuel que vous souhaitez.
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 d'éléments sympas dans cette boîte, comme le composant vidéo Avonni ou d'autres choses intéressantes.
### Configuration du bouton
**Libellé** est le texte affiché sur le bouton.
**Nom de l'icône** est l'icône du 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 (`marque`, `neutre`, et ainsi de suite) selon les styles prédéfinis du Salesforce Design System.
**Alignement horizontal** aligne le bouton dans son conteneur — `gauche`, `centré`, ou `droite`.
**Étirer** étend le bouton pour remplir 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 fenêtre contextuelle.
**En-tête** définit le texte affiché dans cette barre de titre. Il apparaît uniquement lorsque **Masquer l'en-tête** est désactivé.
**Taille** définit la taille de la fenêtre contextuelle : `très petit`, `petit`, `moyen`, ou `grand`. La valeur par défaut est `moyen`.
**Afficher le pied de page** ajoute une section en bas de la fenêtre contextuelle — idéale pour des boutons comme « OK » ou « Annuler ».
**Marges intérieures du contenu** contrôle l'espace entre le contenu à l'intérieur de la boîte et les bords de la boîte. Sur la boîte de dialogue, il est activé par défaut, de sorte que le contenu est aligné contre les bords jusqu'à ce que vous le désactiviez.
## 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 du 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
.gif?alt=media)
