Groupe de boutons

Aperçu

Le composant Avonni Button Group améliore les interactions utilisateur au sein des sites Salesforce Experience Cloud en vous permettant de regrouper plusieurs boutons. Ce composant simplifie la navigation du site et les actions, créant une expérience utilisateur plus soignée et intuitive.

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

Boutons visibles

Ce paramètre détermine le nombre maximum de boutons directement visibles à l'écran. Si vous avez plus de boutons que le nombre spécifié, les autres seront placés dans un menu déroulant pratique.

Menu de boutons

• Étiquette : Définissez le texte affiché sur le bouton qui ouvre le menu déroulant contenant des boutons supplémentaires.

• Nom de l'icône : Sur 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 pour le menu de boutons (par ex. « neutral », « brand », « inverse »).

• Alignement du menu : Sélectionnez comment le menu déroulant sera positionné par rapport au bouton (« left » ou « right »).

Boutons

• Étiquette : Saisissez le texte que vous souhaitez voir apparaître sur le bouton.

• Nom de l'icône : Si souhaité, choisissez une icône à placer sur le bouton.

• Position de l'icône : Précisez si l'icône doit être à la « left » ou à la « right » de l'étiquette 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 l'interaction utilisateur.

• Caché : Activez ce paramètre si vous souhaitez que le bouton soit initialement caché de la vue.

• 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 une liste complète des actions et configurations possibles.

Considérations importantes

• Concevez votre groupe de boutons en gardant une hiérarchie visuelle claire à l'esprit. 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.

• Assurez-vous que les étiquettes des boutons sont concises et décrivent précisément leur fonction.

• Testez toujours minutieusement la configuration de votre groupe de boutons sur différents appareils et navigateurs pour garantir une expérience utilisateur optimale.

Apparence et style

Le composant Avonni Button Group offre des options de style complètes pour personnaliser son apparence au sein de votre site Experience Cloud. Voici une répartition des attributs de style disponibles :

Étiquette/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 polices : Spécifie la police à utiliser pour le texte du bouton.

• taille de la police : Contrôle la taille du texte du bouton.

• style de police : Définit le style de police (par ex. normal, italic, oblique).

• poids de la police : Détermine l'épaisseur du texte du bouton (par ex. normal, bold, bolder).

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 de la bordure par défaut.

• 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 la bordure (par ex. solid, dashed, dotted).

Exemple d'utilisation

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

Étiquette/Icône :
   couleur : blanc
   couleur au survol : #f5f5f5 

Arrière-plan :
   couleur : rouge 

Bordure : 
   couleur : rouge  

Notes importantes

• Utilisez un sélecteur de couleurs web ou un générateur pour trouver les codes couleurs souhaités.

• Efforcez-vous d'assurer la cohérence avec le design global et le schéma de couleurs de votre site Experience Cloud.

• Testez toujours vos modifications de style pour garantir l'effet visuel souhaité et l'accessibilité.