Badge
Petit composant de statut et de métadonnées utilisé pour étiqueter, catégoriser ou mettre en surbrillance des informations dans l'interface utilisateur de PyColors.
Métadonnées compactes pour les interfaces produitsLien vers la section
Les Badge component est une primitive compacte et non interactive utilisée pour afficher de courtes informations.
Utilisez-le pour:
- état
- catégorie
- nombre
- étiquette du plan
- métadonnées
- état du produit
- Disponibilité des fonctionnalités
Les badges sont légers, sémantiques et alignés avec les tokens du système de conception PyColors.
Ils sont conçus pour métadonnéesPas des actions.
Idée de base
Un badge communique l'état ou le contexte. Il ne doit pas remplacer un bouton.
ImportationLien vers la section
import { Badge } from "@pycolors/ui";Utilisation de baseLien vers la section
Les badges héritent de leurs couleurs à partir de tokens sémantiques et s'adaptent au mode clair et sombre.
Quand utiliser le badgeLien vers la section
Utilisez Badge lorsque l'étiquette aide l'utilisateur à comprendre le contexte sans ajouter de hiérarchie visuelle lourde.
Métadonnées
Statut
Regroupement
VariantesLien vers la section
Utilisez des variantes pour transmettre le sens ou le statut.
Variantes disponiblesLien vers la section
| Variante | Objet |
|---|---|
default | Étiquette primaire ou neutre |
secondary | Informations complémentaires |
muted | Métadonnées de faible importance |
outline | Étiquette neutre bordée |
success | État positif ou terminé |
warning | Précaution ou attention requise |
destructive | Erreur ou état critique |
info | Statut informationnel - sémantique neutre, utilise des tokens de carte |
Règle de conception
Préférez muted et outline pour les métadonnées. Réserve des variantes
d'état sémantique pour les états de produit réels.
TaillesLien vers la section
Utilisez la taille pour contrôler la densité et la hiérarchie.
Tailles disponiblesLien vers la section
| Taille | Objet |
|---|---|
sm | Métadonnées denses, tableaux, listes compactes |
md | Taille du badge par défaut |
lg | Métadonnées d'étiquettes ou remarquables |
Règle de densité
Utilisation sm dans les tableaux et les vues de produits denses. Utilisation
md pour la plupart des surfaces. Utilisation lg Avec parcimonie.
Avec icône de gaucheLien vers la section
Les badges peuvent inclure une icône de gauche lorsque l'icône renforce le statut, le type ou la catégorie.
Règle d'icône
Les icônes devraient renforcer le sens. Le texte doit encore expliquer l'état.
Avec icône de droiteLien vers la section
Utilisez une icône de droite lorsque le badge pointe vers une surface connexe, un contexte externe ou une étape suivante légère.
Règle de placement
Utilisez les icônes de gauche pour l'état ou l'identité. Utilisez les bonnes icônes pour la direction, la continuation ou le contexte lié.
Comme enfantLien vers la section
Utilisation asChild quand le badge doit être rendu comme un autre élément sémantique.
Règle d'interaction
Utilisez uniquement des badges interactifs lorsque l'élément sous-jacent est sémantique, comme une ancre ou un bouton. Si cela déclenche une action importante, utilisez le bouton à la place.
UtilisationsLien vers la section
Choisissez le message
Décidez de ce que le badge communique : statut, catégorie, rôle, version, nombre ou plan.
Choisissez l'accent utile le plus bas
Débuter avec muted ou outline. Déplacez-vous vers des variantes sémantiques uniquement lorsque l'état a besoin d'un sens clair.
Gardez l'étiquette courte
Les badges fonctionnent mieux avec des étiquettes courtes : un ou deux mots.
Évitez de transformer les métadonnées en actions
Un badge ne doit pas devenir une interaction principale. Utilisez le bouton pour les actions.
Badge vs Bouton vs AlerteLien vers la section
| Situation | Utilisation |
|---|---|
| Afficher un petit statut | Badge |
| Afficher une étiquette de catégorie ou de plan | Badge |
| Déclencher une action | Bouton |
| Afficher des commentaires ou des avertissements persistants | Alerte |
| Confirmer l'action temporaire en arrière-plan | Toast |
Règle de décision
Le badge communique le contexte. Le bouton déclenche l'intention. Alert explique les commentaires importants.
APILien vers la section
| Prop | Type | Par défaut | Désignation |
|---|---|---|---|
variant | BadgeVariant | "default" | Style visuel |
size | BadgeSize | "md" | Taille du badge |
asChild | boolean | false | Rendu via Radix Slot |
className | string | — | Autres classes Tailwind |
Le Badge étend la portée HTML standard des props :
React.HTMLAttributes<HTMLSpanElement>;TypeScript typesLien vers la section
export type BadgeVariant =
| "default"
| "secondary"
| "muted"
| "outline"
| "success"
| "warning"
| "destructive";
export type BadgeSize = "sm" | "md" | "lg";AccessibilitéLien vers la section
- Les badges ne sont pas interactifs par défaut.
- N’utilisez pas un badge comme bouton.
- Ne vous fiez pas uniquement à la couleur pour transmettre du sens.
- Les icônes doivent être complémentaires, pas le seul indicateur.
- Utilisation
aria-hidden="true"pour les icônes décoratives. - Lorsqu’il est interactif, utilisez
asChildavec un élément sémantique tel queaoubutton. successetwarningUtilisation dédiée--success-foreground/--warning-foregroundtokens de conception (voir@pycolors/tokens) réglé pour rencontrer le contraste WCAG AA contre leurs arrière-plans respectifs - ne substituez pas une couleur de texte différente sur ces deux variantes.infoutilise des tokens de cartes sémantiques existants; le contraste dépend du thème et doit satisfaire aux mêmes exigences d'accessibilité que les autres variantes de Badge.
Préférez/évitezLien vers la section
Préférez
- étiquettes courtes
- Variantes sémantiques pour le statut réel
mutedououtlinepour les métadonnées- Icônes comme contexte de support uniquement
- utilisation cohérente des badges sur les tables et les cartes
Éviter
- Utiliser les badges comme actions principales
- texte de badge en forme de phrase longue
- trop de badges dans un seul panneau
- couleur seule signification
- Inventer localement des couleurs de badges uniques