> 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.md). # AX - Bouton ## Vue d’ensemble **AX - Bouton** est un composant Experience Cloud qui crée des boutons cliquables sur les pages Experience Sites pour déclencher des actions comme la navigation, l’envoi de formulaires, la création d’enregistrements ou l’ouverture de fenêtres modales. Utilisez-le pour ajouter des appels à l’action personnalisés, envoyer des formulaires, naviguer vers des pages spécifiques, créer des enregistrements ou déclencher des flux. Configurez le libellé, le style, l’icône et l’action du bouton dans Experience Builder, sans code. Idéal pour les CTA de portail, la navigation personnalisée, les actions « Contactez-nous », les workflows de création d’enregistrements ou toute interaction utilisateur nécessitant un bouton clair et personnalisé. ## Configuration Après avoir fait glisser AX - Button sur votre page dans Experience Builder, vous configurerez deux éléments principaux : l’apparence du bouton et ce qui se passe lorsque les utilisateurs cliquent dessus (voir [Interactions](#interactions)). ### Apparence du bouton Ces paramètres contrôlent l’apparence de votre bouton sur la page. **Libellé** est le texte affiché sur le bouton. Gardez-le concis et orienté vers l’action (par ex. « Soumettre la demande », « Voir les détails », « Contactez-nous »). **Nom de l’icône** ajoute une icône à côté du libellé pour aider les utilisateurs à comprendre rapidement l’action. Choisissez dans la bibliothèque d’icônes de Salesforce — les choix courants incluent `utility:download` pour les téléchargements ou `utility:email` pour les actions de contact. **Position de l’icône** place l’icône à `gauche` ou `droite` du libellé ; la gauche convient bien dans la plupart des cas, tandis que la droite peut indiquer une navigation vers l’avant. **Variante** est le style visuel du bouton : `de base`, `neutre`, `marque`, `contour de marque`, `bordure`, `bordure remplie`, `bordure inversée`, `nu`, `nu inversé`, `inversé`, `conteneur`, `succès`, `destructif`, ou `texte destructif`. Choisissez-en un qui convient à l’importance de l’action et au langage de conception de la page.

Onze des quatorze variantes, sur une page claire. Les trois variantes inversées sont conçues pour un fond sombre et ne sont pas affichées ici : sur fond blanc, Nu inversé n’a aucun texte visible et Bordure inversée est un contour vide.

**Alignement horizontal** positionne le bouton dans son conteneur —`gauche`, `centre`, ou `droite`. Le centrage convient bien aux CTA autonomes, tandis que l’alignement à gauche convient aux boutons de formulaire. **Étirement** étend le bouton pour qu’il occupe toute la largeur de son conteneur — utilisez-le pour des CTA mis en avant ou pour aligner sa largeur sur celle des champs de formulaire situés au-dessus. **Désactivé** empêche les utilisateurs de cliquer sur le bouton. Utilisez-le lorsqu’une action n’est pas encore disponible, comme un bouton « Soumettre » en attente des champs requis. **Titre** définit le texte de l’info-bulle affichée au survol du bouton, et **Texte alternatif** fournit un texte accessible décrivant le bouton lorsqu’il n’affiche qu’une icône. **Téléchargement de document CMS** et **Téléchargement via URL de document ou expression** fait télécharger un fichier au clic sur le bouton — référencez un document CMS ou fournissez une URL directe au lieu de déclencher une interaction. ## Interactions Le **Lien vers** paramètre détermine ce qui se passe lorsque les utilisateurs cliquent sur le bouton, et il propose huit types d’action. Choisissez celui qui correspond à ce que vous souhaitez accomplir. L’un d’eux est libellé un peu plus long dans le panneau que dans les titres ci-dessous : **Ouvrir la boîte de dialogue de confirmation**.
### [Afficher un toast](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/show-toast.md) Affiche un bref message de notification qui apparaît en haut de la page et disparaît après quelques secondes. Quand l’utiliser : des messages de confirmation comme « Modifications enregistrées » ou « Demande envoyée » qui ne nécessitent aucune action de l’utilisateur. Les notifications toast fournissent un retour sans interrompre le flux de travail de l’utilisateur. ### [Naviguer](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md) Redirige les utilisateurs vers une autre page — soit dans votre site Experience, soit vers une URL externe. Quand l’utiliser : des boutons « En savoir plus » qui mènent vers des pages de détails, une navigation « Retour à l’accueil » ou des liens vers des ressources externes. Vous pouvez naviguer vers des pages standard, des pages d’enregistrement ou des URL personnalisées. ### [Ouvrir une fenêtre modale d’alerte](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md) Ouvre une fenêtre contextuelle contenant un message que les utilisateurs doivent acquitter avant de continuer. Quand l’utiliser : des avis importants que les utilisateurs doivent lire, comme les conditions générales, les informations sur la confidentialité ou les avertissements avant de poursuivre une action. ### [Ouvrir la confirmation](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-confirm.md) Affiche une boîte de dialogue de confirmation demandant aux utilisateurs de confirmer ou d’annuler leur action. Quand l’utiliser : des actions aux conséquences irréversibles, comme la suppression d’un enregistrement, l’annulation d’une soumission ou la suppression d’un accès. La boîte de dialogue donne aux utilisateurs une chance de reconsidérer avant de continuer. ### [Ouvrir la boîte de dialogue du flux](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md) Lance un flux Salesforce dans une fenêtre modale contextuelle. Quand l’utiliser : des processus en plusieurs étapes comme l’envoi d’un dossier d’assistance, la réponse à un sondage, la mise à jour des informations du compte ou tout workflow guidé. Créez le flux dans Flow Builder, puis associez-le au bouton — le flux s’exécute dans la fenêtre modale sans quitter la page actuelle ### [Exécuter le flux](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/execute-flow.md) Exécute un flux Salesforce lancé automatiquement en arrière-plan, sans boîte de dialogue ni panneau. Quand l’utiliser : une automatisation « déclencher et oublier » derrière un bouton — journaliser une demande, mettre à jour un enregistrement, envoyer une notification. Utilisez **Ouvrir la boîte de dialogue du flux** à la place lorsque le flux comporte des écrans que l’utilisateur doit parcourir. ### [Télécharger](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/download.md) Télécharge un fichier lorsque le bouton est cliqué, depuis un fichier Salesforce, un lien public ou une URL. Quand l’utiliser : des listes de prix, relevés, contrats ou tout document qu’un utilisateur du portail doit conserver. Préférez-le au **Téléchargement de document CMS** paramètre lorsque le fichier est déterminé par l’interaction plutôt que défini à l’avance sur le bouton. ### Actualiser toutes les requêtes Relance chaque requête de la page, afin que les composants autour du bouton affichent les données à jour. Quand l’utiliser : après qu’un flux ou une fenêtre modale a modifié un enregistrement, pour mettre à jour le reste de la page sans demander à l’utilisateur de la recharger. ## Style Personnalisez l’apparence du bouton à partir de l’ **Style** de l’éditeur de propriétés. {% tabs %} {% tab title="Espacement" %} Contrôle l’espace autour du bouton dans chaque direction (haut, bas, gauche, droite). Utilisez-les pour positionner précisément vos boutons, éviter le chevauchement avec d’autres éléments et créer de l’espace. {% endtab %} {% tab title="Libellé/Icône" %} * **Couleur :** La couleur par défaut du texte ou de l’icône du bouton. * **Couleur active :** La couleur vers laquelle le texte/l’icône change lorsque le bouton est cliqué ou touché. * **Couleur au survol :** La couleur vers laquelle le texte/l’icône change lorsque l’utilisateur survole le bouton avec la souris. * **Famille de police :** Spécifie la police utilisée pour le libellé du bouton. Assurez-vous qu’elle s’harmonise avec le design global de votre site et qu’elle soit facile à lire. * **Taille de police :** Contrôle la taille du texte du libellé. Ajustez-la selon les besoins pour la lisibilité et la mise en valeur. * **Style de police :** Définit le style du texte, par exemple normal, italique ou oblique. À utiliser avec parcimonie pour une mise en valeur particulière. * **Graisse de police :** Détermine le degré de gras du texte. Envisagez d’utiliser différentes graisses pour distinguer les boutons principaux des boutons secondaires. {% endtab %} {% tab title="Arrière-plan" %} * **Couleur d’arrière-plan :** La couleur par défaut de l’arrière-plan du bouton. * **Couleur d’arrière-plan active :** La couleur d’arrière-plan du bouton lorsqu’il est cliqué ou touché. * **Couleur d’arrière-plan au survol :** La couleur d’arrière-plan lorsque l’utilisateur survole le bouton avec la souris. {% endtab %} {% tab title="Bordure" %} * **Couleur de bordure :** La couleur de la bordure du bouton. * **Couleur de bordure active :** La couleur de la bordure lorsque le bouton est actif. * **Couleur de bordure au survol :** La couleur de la bordure lorsque l’utilisateur survole le bouton avec la souris. * **Épaisseur de bordure :** L’épaisseur de la bordure (en pixels). * **Style de bordure :** Le type de bordure : pleine, pointillée, tiretée, etc. * **Rayon de bordure :** Contrôle le degré d’arrondi des coins du bouton. Des valeurs plus élevées donnent des boutons plus doux et plus arrondis {% 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.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.