> 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

## Aperçu

**AX - Groupe de boutons** est un composant Experience Cloud qui affiche plusieurs boutons associés ensemble comme un groupe unifié sur les pages des sites Experience.

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 reliés comme une seule unité, ce qui montre clairement qu’il s’agit de choix associés.

Idéal pour les actions de formulaire, les options de gestion des enregistrements, la navigation de type onglet, ou partout où les utilisateurs du portail doivent choisir entre plusieurs actions liées.

***

## Configuration du groupe de boutons <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Suivez ces étapes pour adapter parfaitement le composant Avonni Button Group au design et aux fonctionnalités de votre site Experience Cloud :

### **Paramètres clés**

#### **Afficher en ligne**

Activez ce paramètre pour organiser les boutons horizontalement sur l’écran. Le désactiver empilera les boutons verticalement.

#### **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.

#### **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 du bouton, 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 (par exemple, « neutral », « brand », « inverse »).
* **Alignement du menu :** Sélectionnez la position du menu déroulant par rapport au bouton (« left » ou « right »).

#### **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.
* **Position de l’icône :** Indiquez si l’icône doit se trouver à gauche ou à droite du libellé du bouton.
* **Variante :** Vous pouvez sélectionner l’apparence du bouton parmi les styles prédéfinis (« neutral », « brand », « destructive », etc.).
* **Désactivé :** Activez ce paramètre si vous souhaitez que le bouton commence 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é.
* **Interaction 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 variante « brand » pour mettre en avant les actions principales.
* Utilisez la variante « destructive » avec parcimonie pour les actions ayant des conséquences importantes.
* Veillez à ce 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.

***

## Apparence du style <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Le composant Avonni Button Group offre des options de style complètes pour personnaliser son apparence au sein de votre site Experience Cloud. Vous trouverez ci-dessous un aperçu des attributs de style disponibles :

<details>

<summary>Libellé/Icône</summary>

* **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 en focus).
* **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 le degré de gras du texte du bouton (par exemple, normal, gras, plus gras).

</details>

<details>

<summary>Arrière-plan</summary>

* **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.

</details>

<details>

<summary>Bordure</summary>

* **couleur :** Définit la couleur par défaut de la bordure.
* **couleur active :** Définit la couleur de la bordure lorsque le bouton est actif.
* **couleur au survol :** Définit la couleur de la 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).

</details>

***

### **Exemple d’utilisation**

Pour créer un groupe de boutons avec un fond rouge, du texte blanc et un léger effet au survol, envisagez la configuration suivante :

```
Libellé/Icône :
   couleur : blanc
   couleur au survol : #f5f5f5 

Arrière-plan :
   couleur : rouge 

Bordure : 
   couleur : rouge  
```

### **Remarques importantes**

* Utilisez un sélecteur ou générateur de couleurs web pour trouver les codes couleur souhaités.
* Veillez à maintenir la cohérence avec le design global et la palette de couleurs de votre site Experience Cloud.
* Testez toujours vos modifications de style afin de 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 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-group.md?ask=<question>
```

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.