Badge

Le composant Badge vous permet d’ajouter des étiquettes colorées et attrayantes à votre interface utilisateur.

Le composant Badge est conçu pour afficher un seul élément ou une seule information. Si vous devez afficher plusieurs éléments sous forme de badges, envisagez d'utiliser le Conteneur de puces composant à la place.

Aperçu

Le composant Avonni Badge ajoute des étiquettes colorées et attrayantes pour mettre en valeur des informations dans vos composants dynamiques Salesforce. Il est conçu pour des éléments uniques — utilisez le Conteneur de puces pour plusieurs badges.

Les fonctionnalités clés incluent :

• Étiquettes concises : Afficher du texte court, des nombres ou des phrases.

• Variantes de style : Options codées par couleur pour différentes connotations (par ex., succès, avertissement).

• Avatar optionnel : Ajouter des icônes, images ou initiales pour le contexte.

• Accrocheur : Améliore la clarté de l'interface et l'attrait visuel.

Astuce : Associez-le à des listes ou des cartes pour étiqueter des éléments de manière dynamique.

Cas d'utilisation

• Indicateurs de nouvel élément : Signaler de nouveaux produits, fonctionnalités ou contenus (par ex., "Nouveau").

• Comptes de notifications : Afficher les messages ou alertes non lus (par ex., "5+").

• Étiquettes de produit : Catégoriser des éléments comme "Promotion", "Meilleure vente" ou "Nouvel arrivage".

• Statut utilisateur : Afficher des rôles ou états (par ex., "En ligne", "Admin").

• Marqueurs d'état : Indiquer les étapes d'un processus (par ex., "Approuvé", "En attente").

---

Configuration

Sélectionnez le Badge sur le canevas pour accéder aux propriétés dans le panneau Propriétés à droite.

Propriétés de base

Ceux-ci gèrent le texte principal et l'identification.

Propriété	Type	Description	Exemple
par le véritable	Texte	Identifiant unique pour l'instance (supposé standard pour les composants Avonni).	StatusBadge
Étiquette	Texte/Liaison	Texte à l'intérieur du badge ; restez concis — liez pour le rendre dynamique.	"Urgent" ou {!notificationCount}

Bonne pratique : Utilisez des étiquettes claires et courtes ; liez-les à des Variables pour des mises à jour en temps réel (par ex., des comptes issus de requêtes).

Apparence et variante

Ceci contrôle le style visuel.

Propriété	Type	Description	Options/Exemples
Variante	Sélectionnez	Style et couleur : alignez avec l'intention (par ex., succès pour positif, erreur pour les problèmes).	success (vert), warning (jaune), error (rouge), info (bleu/gris), et plus.

Astuce : Prévisualisez les variantes dans le panneau des propriétés pour correspondre à votre thème.

Avatar (optionnel)

Ajoutez un élément visuel pour le contexte.

Propriété	Type	Description	Options/Exemples
Source	Texte/URL/Liaison	URL d'image, initiales ou nom d'icône ; privilégiez une seule source.	URL : "https://example.com/pic.jpg" , Initiales : "JD", Icône : standard:user.
Taille	Sélectionnez	Dimensions de l'avatar.	x-small, small, medium.
Forme	Sélectionnez	Forme : cercle ou carré.	cercle.

Bonne pratique

Utilisez des avatars lorsque vous liez à des utilisateurs/objets ; sélectionnez une icône comme solution de secours s'il n'y a pas d'image/initiales. Ajustez le style de l'avatar ou l'apparence en configurant les propriétés dans le Panneau de style (par ex., bordures, ombres, couleurs).

: La valeur maximale.

Exemple 1 : Badge de statut simple

1. Configurer les propriétés :

   • Étiquette : "Approuvé"

   • Variante : success

Résultat : Un badge vert mettant en évidence un statut positif, par ex. sur un enregistrement.

Exemple 2 : Compte de notifications avec avatar

1. Créer une variable : Ajoutez une Variable de type Nombre unreadCount.

2. Configurer les propriétés :

   • Étiquette : {!unreadCount}

   • Variante : warning

   • Source de l'avatar : Icône standard:scan_card (ou liez une URL d'image)

   • Taille de l'avatar : small

   • Forme de l'avatar : circle

Résultat : Badge jaune dynamique affichant les comptes avec icône, se mettant à jour via la variable.

Exemple 3 : Badge de rôle utilisateur

1. Configurer les propriétés :

   • Étiquette : "Admin"

   • Variante : info

   • Source de l'avatar : Initiales "AD"

   • Forme de l'avatar : square

Résultat : Badge bleu avec initiales pour indiquer le rôle dans les profils.

---

Pourquoi utiliser le composant Badge ?

• Mettre en avant les infos clés : Attirer l'attention sur les mises à jour ou les détails.

• Catégoriser visuellement : Grouper les éléments par attributs ou statut.

• Afficher le statut : Transmettre clairement l'avancement/les états (par ex., "Terminé").

• Améliorer l'attrait de l'interface : Ajouter de la couleur et de la clarté pour un meilleur engagement.

---

Considérations clés

• Unique vs. multiple : Limitez-vous à un élément par Badge ; utilisez Conteneur de puces pour les listes.

• Bonnes pratiques d'étiquetage : Restez court, clair et pertinent pour éviter toute confusion.

• Sélection de variante : Faites correspondre les couleurs à la sémantique (par ex., rouge pour les erreurs) pour une UX intuitive.

• Utilisation des avatars : Ajoutez-les uniquement lorsque c'est pertinent ; assurez-vous que les sources sont accessibles (par ex., URL valides).

• Liaison dynamique : Liez l'Étiquette/L'Avatar pour des badges contextuels (par ex., depuis des enregistrements).

• Accessibilité : Utilisez des couleurs contrastées ; fournissez un texte alternatif pour les avatars si possible.

---

Dépannage des problèmes courants

• Badge non visible : Vérifiez la variante pour les styles cachés ; assurez-vous que l'Étiquette n'est pas vide.

• Avatar ne se charge pas : Vérifiez la source (URL/nom d'icône) ; testez les liaisons avec des valeurs statiques.

• Étiquette trop longue : Raccourcissez le texte — les badges tronquent ; utilisez des ellipses si nécessaire via un style personnalisé.

• Conflits de couleur : Prévisualisez dans différents thèmes ; ajustez la variante pour la lisibilité.

• Pas de dynamique : Confirmez les liaisons aux Variables/Formules ; déboguez en mode aperçu.

---

Résumé

Le composant Avonni Badge crée des étiquettes vibrantes pour mettre en valeur les informations et améliorer les interfaces dans Salesforce. Avec des variantes et des avatars, il est polyvalent pour les statuts, notifications et plus encore. Pour les composants associés, voir Avonni Chip Container ou le Guide des icônes.