> 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 pour 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 flows. 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 aux couleurs de la marque. *** ## **Configurer votre bouton** 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. ### **Apparence du bouton** Ces paramètres contrôlent l'apparence de votre bouton sur la page. **Libellé** – Le texte affiché sur le bouton. Gardez-le court et orienté vers l’action (par ex. « Envoyer la demande », « Voir les détails », « Contactez-nous »). **Nom de l’icône** – Ajoutez 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** – Placez l'icône à gauche ou à droite du libellé. Le positionnement à gauche fonctionne bien dans la plupart des cas, tandis que le positionnement à droite peut indiquer une navigation vers la page suivante. **Variante** – Le style visuel du bouton. Les options incluent généralement principal (en gras, accrocheur), secondaire (discret) ou destructif (rouge, pour les actions de suppression). Choisissez-le en fonction de l'importance de l'action. **Alignement horizontal** – Positionnez le bouton dans son conteneur : à gauche, au centre ou à droite. L'alignement centré fonctionne bien pour les CTA autonomes, tandis que l'alignement à gauche convient aux boutons de formulaire. **Étirement** – Lorsqu'elle est activée, cette option permet au bouton de s'étendre pour remplir toute la largeur de son conteneur. Utilisez-la pour les CTA mis en avant ou lorsque vous souhaitez que le bouton corresponde à la largeur des champs de formulaire situés au-dessus. **Désactivé** – Empêche les utilisateurs de cliquer sur le bouton. Utilisez cette option lorsqu'une action n'est pas encore disponible, par exemple en désactivant un bouton « Envoyer » tant que les champs obligatoires ne sont pas remplis ### **Actions du bouton (Lien vers)** La **Lien vers** Ce paramètre 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 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 toasts fournissent un retour d'information 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 : les boutons « En savoir plus » qui mènent à des pages de détail, la navigation « Retour à l'accueil » ou les 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 avec un message que les utilisateurs doivent confirmer avant de continuer. Quand l'utiliser : les messages importants que les utilisateurs doivent lire, comme les conditions générales, les mentions de confidentialité ou les avertissements avant qu'ils n'effectuent une action. [**Ouvrir une 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 : les 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 permet aux utilisateurs de reconsidérer leur choix avant de continuer. [**Ouvrir la boîte de dialogue Flow**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md) Lance un Flow Salesforce dans une fenêtre modale contextuelle. Quand l'utiliser : les processus en plusieurs étapes tels que la soumission d'un dossier d'assistance, le remplissage d'une enquête, la mise à jour des informations du compte ou tout autre workflow guidé. Créez le flow dans Flow Builder, puis associez-le au bouton — le flow s'exécute dans la fenêtre modale sans quitter la page actuelle *** ## Spécifications {% tabs %} {% tab title="Propriétés" %} | Nom | Description | Utilisation | | ------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Libellé** | Définissez le texte affiché sur le bouton. | Saisissez un libellé concis et clair qui indique à l'utilisateur l'action du bouton. | | **Nom de l’icône** | Choisissez une icône à afficher sur le bouton. | Sélectionnez une icône appropriée qui représente visuellement l'action du bouton et améliore la compréhension de l'utilisateur. | | **Position de l’icône** | Déterminez la position de l'icône dans le bouton. | Choisissez une position qui équilibre visuellement le bouton et s'harmonise avec la direction de conception de votre page Web. | | **Variante** | Sélectionnez une variante de style prédéfinie pour le bouton. | Choisissez une variante adaptée au contexte de l'action du bouton et au langage de conception global de la page Web. | | **Alignement horizontal** | Définissez l'alignement horizontal du bouton dans son conteneur. | Alignez le bouton pour obtenir une harmonie visuelle et respecter les exigences de mise en page de la page Web. | | **Étirement** | Déterminez si le bouton doit s'étendre pour remplir son conteneur. | Activez cette option pour que le bouton s'étende horizontalement et remplisse l'espace disponible dans son conteneur. | | **Désactivé** | Contrôlez l'état actif ou désactivé du bouton. | Désactivez le bouton pour empêcher toute interaction utilisateur, ce qui est utile lorsqu'une certaine action n'est pas applicable ou doit être temporairement empêchée. | | {% endtab %} | | | {% tab title="Apparence" %} ### **Espacement (Haut, Bas, Gauche, Droite)** * **Marge supérieure, marge inférieure, marge gauche, marge droite :** Ces paramètres contrôlent l'espace autour du bouton dans chaque direction. Utilisez-les pour positionner précisément vos boutons, éviter le chevauchement avec d'autres éléments et créer de l'espace. ### **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 passe lorsque le bouton est cliqué ou touché. * **Couleur au survol :** La couleur vers laquelle le texte/l'icône passe 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 au besoin pour la lisibilité et la mise en valeur. * **Style de police :** Définit le style du texte, comme normal, italique ou oblique. À utiliser avec parcimonie pour une mise en valeur particulière. * **Graisse de police :** Détermine le degré de graisse du texte. Envisagez d'utiliser différentes graisses pour différencier les boutons principaux et secondaires. ### **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 la souris. ### **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 la souris. * **Taille de la bordure :** L'épaisseur de la bordure (en pixels). * **Style de bordure :** Le type de bordure : plein, pointillé, 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-button.md?ask= ``` 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.