> 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-group.md). # AX - Groupe de boutons ## Vue d'ensemble **AX - Groupe de boutons** est un composant Experience Cloud qui affiche plusieurs boutons associés ensemble sous forme de groupe unifié sur les pages Experience Sites. Utilisez-le pour présenter des actions liées côte à côte — comme « Enregistrer » et « Annuler », « Modifier » et « Supprimer », ou des options de navigation pour différentes sections. Les boutons restent visuellement liés comme une seule unité, ce qui montre clairement qu'il s'agit de choix connexes. Idéal pour les actions de formulaire, les options de gestion des enregistrements, la navigation de type onglets, ou partout où les utilisateurs du portail doivent choisir entre plusieurs actions liées. ## Configuration Suivez ces étapes pour adapter le composant Avonni Button Group afin qu'il s'intègre parfaitement au design et aux fonctionnalités de votre site Experience Cloud : ### **Paramètres clés** #### **Afficher en ligne** Contrôle la manière dont les boutons se placent les uns à côté des autres. Lorsqu'il est activé, ils sont rendus comme des éléments séparés avec un espacement entre eux. Lorsqu'il est désactivé, ils sont réunis en un seul groupe compact, bord à bord. Les deux mises en page sont horizontales. Le groupe de boutons n'empile pas ses boutons verticalement. Pour disposer les boutons en colonne verticale, placez un(e) séparé(e) **AX - Bouton** composant pour chaque action dans la région à la place.

Afficher en ligne activé, en haut, avec les boutons séparés. Désactivé, en dessous, avec les mêmes trois boutons réunis en un seul groupe bord à bord.

#### **Étendre** Lorsqu'il est activé, le groupe occupe toute la largeur de son conteneur et les boutons se partagent l'espace entre eux. Laissez-le désactivé pour conserver une largeur adaptée au contenu, ce qui est ce que **Alignement horizontal** positions. Les boutons qui affichent uniquement une icône conservent leur propre largeur, de sorte que les boutons avec libellé prennent l'espace supplémentaire au lieu de laisser un espace autour d'une icône centrée. #### **Alignement horizontal** Positionne le groupe de boutons dans son conteneur : gauche, centre ou droite, affiché dans le panneau sous forme de trois icônes d'alignement. La valeur par défaut est gauche, et s'applique au groupe uniquement lorsque **Étendre** est désactivé. #### **Boutons visibles** Ce paramètre détermine le nombre maximal de boutons visibles directement à l'écran. Si vous avez plus de boutons que le nombre spécifié, les boutons restants seront placés dans un menu déroulant pratique. #### **Attributs du menu de boutons** * **Libellé :** Définissez le texte affiché sur le bouton qui ouvre le menu déroulant contenant des boutons supplémentaires. * **Nom de l'icône :** Dans le menu de boutons, sélectionnez une icône appropriée (consultez Salesforce Lightning Design System pour les icônes disponibles). * **Variante :** Choisissez le style visuel du menu de boutons — **Nu**, **Nu inversé**, **Bordure**, **Bordure remplie**, **Bordure inversée**, **Marque**, **Contour de marque**, **Conteneur**, **Destructif**, **Texte destructif**, **Inversé**, **Neutre** (la valeur par défaut) ou **Succès**. * **Alignement du menu :** Sélectionnez la position du menu déroulant par rapport au bouton — **Auto**, **Gauche**, **Centre**, **Droite**, **En bas à gauche**, **En bas au centre** ou **En bas à droite**. La valeur par défaut, **Auto**, place le menu là où il s'intègre dans la fenêtre d'affichage. #### **Boutons** * **Libellé :** Saisissez le texte que vous souhaitez voir apparaître sur le bouton. * **Nom de l'icône :** Si vous le souhaitez, choisissez une icône à placer sur le bouton. * **Source de l'icône :** Utilisez votre propre image comme icône du bouton, au lieu d'une icône Lightning Design System. * **Position de l'icône :** Indiquez si l'icône se situe à la **Gauche** (la valeur par défaut) ou à la **Droite** du libellé du bouton. Elle n'apparaît que lorsque le bouton a un **Libellé**: un bouton avec icône seule n'a pas de libellé par rapport auquel positionner l'icône. * **Variante :** Sélectionnez l'apparence du bouton — **Nu**, **Nu inversé**, **Base**, **Bordure**, **Bordure remplie**, **Bordure inversée**, **Marque**, **Contour de marque**, **Conteneur**, **Destructif**, **Texte destructif**, **Inversé**, **Neutre** (la valeur par défaut) ou **Succès**. * **Désactivé :** Activez ce paramètre si vous souhaitez que le bouton démarre dans un état désactivé, empêchant toute interaction de l'utilisateur. * **Masqué :** Activez ce paramètre si vous souhaitez que le bouton soit initialement masqué. * **Titre :** Texte d'info-bulle affiché lorsqu'un utilisateur survole le bouton. * **Texte alternatif :** Texte accessible décrivant le bouton, lu par les lecteurs d'écran. Renseignez-le chaque fois que le bouton affiche une icône sans libellé. * **Au clic :** Cette section essentielle vous permet de définir ce qui se passe lorsqu'un utilisateur clique sur le bouton. Consultez la page de documentation « Interactions au clic » pour une liste complète des actions et configurations possibles. ### **Considérations importantes** * Concevez votre groupe de boutons en gardant à l'esprit une hiérarchie visuelle claire. Utilisez la **Marque** variante pour mettre en avant les actions principales. * Utilisez la **Destructif** variante avec parcimonie pour les actions aux conséquences importantes. * Assurez-vous que les libellés des boutons soient concis et décrivent précisément leur fonction. * Testez toujours minutieusement la configuration de votre groupe de boutons sur différents appareils et navigateurs afin de garantir une expérience utilisateur optimale. ## Style Le composant Avonni Button Group offre de nombreuses options de style pour personnaliser son apparence dans votre site Experience Cloud. Voici un aperçu des attributs de style disponibles : {% tabs %} {% tab title="Marge" %} Contrôle l'espacement externe autour du groupe. {% endtab %} {% tab title="Rembourrage" %} Contrôle l'espacement interne du groupe. {% endtab %} {% tab title="Libellé/Icône" %} * **couleur :** Définit la couleur par défaut du texte ou de l'icône. * **couleur active :** Définit la couleur du texte ou de l'icône lorsque le bouton est actif (cliqué ou focalisé). * **couleur au survol :** Définit la couleur du texte ou de l'icône lorsque l'utilisateur survole le bouton avec la souris. * **famille de police :** Spécifie la police à utiliser pour le texte du bouton. * **taille de police :** Contrôle la taille du texte du bouton. * **style de police :** Définit le style de police (par exemple : normal, italique, oblique). * **graisse de police :** Détermine l'épaisseur du texte du bouton (par exemple : normal, gras, plus gras). {% endtab %} {% tab title="Arrière-plan" %} * **couleur :** Définit la couleur d'arrière-plan par défaut du bouton. * **couleur active :** Définit la couleur d'arrière-plan lorsque le bouton est actif. * **couleur au survol :** Définit la couleur d'arrière-plan lorsque l'utilisateur survole le bouton avec la souris. {% endtab %} {% tab title="Bordure" %} * **couleur :** Définit la couleur de bordure par défaut. * **couleur active :** Définit la couleur de bordure lorsque le bouton est actif. * **couleur au survol :** Définit la couleur de bordure lorsque l'utilisateur survole le bouton avec la souris. * **taille :** Contrôle la largeur de la bordure. * **style :** Spécifie le style de bordure (par exemple : solide, en tirets, en pointillés). {% endtab %} {% endtabs %} ### **Exemple d'utilisation** Pour créer un groupe de boutons avec un fond rouge, un texte blanc et un effet de survol subtil, envisagez la configuration suivante : ``` Libellé/Icône : couleur : blanc couleur au survol : #f5f5f5 Arrière-plan : couleur : rouge Bordure : couleur : rouge ``` ### **Notes importantes** * Utilisez un sélecteur de couleurs en ligne ou un générateur pour trouver les codes couleur souhaités. * Visez la cohérence avec le design global et la palette de couleurs de votre site Experience Cloud. * Testez toujours vos modifications de style pour garantir l'effet visuel souhaité et l'accessibilité. --- # 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-group.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.