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
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
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 :
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 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).
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.
Bordure
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).
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 :
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é.
Mis à jour
Ce contenu vous a-t-il été utile ?