> 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 ## Aperçu **AX - Bouton** est un composant Experience Cloud qui crée des boutons cliquables sur les pages des sites Experience afin de déclencher des actions telles que 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 flux de création d'enregistrements ou toute interaction utilisateur nécessitant un bouton clair et à l'image de la marque. ## 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é action (par exemple, « Envoyer 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 parmi 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é ; à gauche fonctionne bien dans la plupart des cas, tandis qu'à droite peut indiquer une navigation vers l'avant. **Variante** est le style visuel du bouton : `de base`, `neutre`, `brand`, `contour de marque`, `bordure`, `bordure remplie`, `bordure inversée`, `sans bordure`, `sans bordure inversé`, `inverse`, `conteneur`, `succès`, `destructif`, ou `texte destructif`. Choisissez-en un qui convient à l'importance de l'action et au langage visuel de la page. **Alignement horizontal** positionne le bouton dans son conteneur —`à gauche`, `au centre`, ou `à droite`. Le centrage convient bien aux CTA autonomes, tandis que l'alignement à gauche convient aux boutons de formulaire. **Étendre** étend le bouton pour qu'il remplisse toute la largeur de son conteneur — utilisez-le pour les CTA mis en évidence ou pour correspondre à la largeur 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, par exemple un bouton « Envoyer » en attente des champs obligatoires. **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 d'un document CMS** et **Téléchargement par URL du document ou par expression** font télécharger un fichier au clic — référencez un document CMS ou fournissez une URL directe au lieu de déclencher une interaction. ## Interactions La **Lien vers** détermine ce qui se passe lorsque les utilisateurs cliquent sur le bouton. Choisissez le type d'action qui correspond à ce que vous souhaitez accomplir.
### [Afficher une notification](/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 puis disparaît après quelques secondes. Quand l'utiliser : messages de confirmation comme « Modifications enregistrées » ou « Demande envoyée » qui ne nécessitent aucune action de l'utilisateur. Les toasts 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 : boutons « En savoir plus » qui mènent à des pages de détails, navigation « Retour à l'accueil » ou liens vers des ressources externes. Vous pouvez naviguer vers des pages standard, des pages d'enregistrement ou des URL personnalisées. ### [Ouvrir la modale d’alerte](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md) Ouvre une fenêtre contextuelle avec un message que les utilisateurs doivent reconnaître avant de continuer. Quand l'utiliser : avis importants que les utilisateurs doivent lire, comme les conditions générales, les mentions de 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 : actions aux conséquences irréversibles, comme la suppression d'un enregistrement, l'annulation d'une soumission ou le retrait d'un accès. La boîte de dialogue offre aux utilisateurs la possibilité 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 : processus en plusieurs étapes comme la soumission d'un dossier d'assistance, le remplissage d'une enquête, la mise à jour d'informations de compte ou tout autre workflow guidé. Créez le flux dans Flow Builder, puis connectez-le au bouton — le flux s'exécute dans la modale sans quitter la page actuelle ## Style Personnalisez l'apparence du bouton à partir de **Style** section 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-le pour positionner précisément vos boutons, éviter les chevauchements 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 dans laquelle le texte/l'icône change lorsque le bouton est cliqué ou touché. * **Couleur au survol :** La couleur dans laquelle le texte/l'icône change lorsque l'utilisateur survole le bouton avec sa souris. * **Famille de police :** Spécifie la police utilisée pour le libellé du bouton. Assurez-vous qu'elle correspond au design global de votre site et qu'elle est facile à lire. * **Taille de police :** Contrôle la taille du texte du libellé. Ajustez-la selon les besoins de lisibilité et de 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érents niveaux de graisse pour différencier les boutons principaux et secondaires. {% endtab %} {% tab title="Arrière-plan" %} * **Couleur de fond :** 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 sa souris. {% endtab %} {% tab title="Bordure" %} * **Couleur de la bordure :** La couleur de la bordure du bouton. * **Couleur de bordure active :** La couleur de bordure lorsque le bouton est actif. * **Couleur de bordure au survol :** La couleur de bordure lorsque l'utilisateur survole le bouton avec sa souris. * **Taille de la bordure :** L'épaisseur de la bordure (en pixels). * **Style de bordure :** Le type de bordure : solide, pointillée, en tirets, etc. * **Rayon de bordure :** Contrôle l'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 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.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.