> 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 sous la forme d’un groupe unifié sur les pages Experience Sites.

Utilisez-le pour présenter des actions associé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 en 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, une navigation de type onglets, ou partout où les utilisateurs du portail doivent choisir entre plusieurs actions associées.

## Configuration

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 disposer les boutons horizontalement à l’écran. Le désactiver empilera les boutons verticalement.

#### **Alignement horizontal**

Positionne le groupe de boutons dans son conteneur — `à gauche`, `au centre`, ou `à droite`.

#### **Boutons visibles**

Ce paramètre détermine le nombre maximal de boutons directement visibles à 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 des boutons, sélectionnez une icône appropriée (reportez-vous au Salesforce Lightning Design System pour les icônes disponibles).
* **Variante :** Choisissez le style visuel du menu de boutons (par ex. « neutral », « brand », « inverse »).
* **Alignement du menu :** Sélectionnez la position du menu déroulant par rapport au bouton (« gauche » ou « droite »).

#### **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 :** Précisez 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 soit initialement désactivé, empêchant toute interaction utilisateur.
* **Masqué :** Activez ce paramètre si vous souhaitez que le bouton soit initialement masqué.
* **Interaction au clic :** Cette section cruciale vous permet de définir ce qui se passe lorsqu’un utilisateur clique sur le bouton. Consultez la page de documentation « On Click Interactions » pour obtenir une liste complète des actions et configurations possibles.

### **Points importants à considérer**

* 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 aux conséquences importantes.
* Veillez à ce que les libellés des boutons soient concis et décrivent précisément leur fonction.
* Testez toujours soigneusement 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 sur votre site Experience Cloud. Voici un aperçu des attributs de style disponibles :

{% tabs %}
{% tab title="Marge" %}
Contrôle l’espacement extérieur autour du groupe.
{% endtab %}

{% tab title="Rembourrage" %}
Contrôle l’espacement intérieur 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 au 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 ex. normal, italique, oblique).
* **graisse de police :** Détermine l’épaisseur du texte du bouton (par ex. 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 ex. plein, tireté, pointillé).
  {% endtab %}
  {% endtabs %}

### **Exemple d’utilisation**

Pour créer un groupe de boutons avec un fond rouge, du texte blanc et un léger effet de survol, 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 de couleur souhaités.
* Efforcez-vous d’être cohérent 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-button-group.md?ask=<question>&goal=<endgoal>
```

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