Étiquette (Badge)
Étiquettes inline pour le statut, les catégories et les métadonnées -- 11 variantes de couleurs, 4 tailles, icônes, formes pilule/arrondies et contours en trait.
Utilisez le composant <Badge> pour étiqueter le contenu avec des indicateurs de statut, des étiquettes de catégorie ou des marqueurs de version. Les badges s'affichent comme des éléments inline compacts, vous pouvez donc les insérer dans du texte courant ou les empiler dans une mise en page.
Badge de base
Un badge simple avec le style par défaut :
Default<Badge>Default</Badge>Couleurs
Les badges sont disponibles en 11 variantes de couleurs pour transmettre différentes significations :
<Badge color="gray">Gray</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="red">Red</Badge>
<Badge color="purple">Purple</Badge>Couleurs de surface
Pour les badges qui s'adaptent à l'arrière-plan de la page :
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>Couleurs destructives
Pour les états d'avertissement ou d'erreur :
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>Avec des icônes
Ajoutez des icônes pour rendre les badges plus descriptifs :
<Badge icon="circle-check" color="green">Verified</Badge>
<Badge icon="star" color="yellow">Featured</Badge>
<Badge icon="bolt" color="purple">New</Badge>
<Badge icon="clock" color="blue">Pending</Badge>Types d'icônes
Spécifiez un style d'icône différent en utilisant iconType :
<Badge icon="star" iconType="solid" color="yellow">Solid</Badge>
<Badge icon="star" iconType="regular" color="yellow">Regular</Badge>
<Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
<Badge icon="github" iconType="brands" color="gray">GitHub</Badge>Tailles
Quatre tailles sont disponibles pour s'adapter à différents contextes :
<Badge size="xs" color="blue">Extra Small</Badge>
<Badge size="sm" color="blue">Small</Badge>
<Badge size="md" color="blue">Medium</Badge>
<Badge size="lg" color="blue">Large</Badge>Formes
Choisissez entre des coins arrondis ou une forme pilule :
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>Variante contour
Utilisez des badges avec contour pour un poids visuel plus léger :
<Badge stroke color="blue">Outlined Blue</Badge>
<Badge stroke color="green">Outlined Green</Badge>
<Badge stroke color="red">Outlined Red</Badge>
<Badge stroke color="purple">Outlined Purple</Badge>État désactivé
Réduisez l'opacité pour les badges inactifs :
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>Utilisation inline
Les badges fonctionnent en ligne avec le texte. Cette fonctionnalité nécessite un abonnement Premium. Vous pouvez également marquer les éléments comme New ou Deprecated.
This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.
You can also mark items as <Badge color="green" size="sm">New</Badge> or
<Badge color="red" size="sm">Deprecated</Badge>.Props
Variante de couleur : gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.
Taille du badge : xs, sm, md, lg.
Forme du badge : rounded, pill.
Nom de l'icône Font Awesome.
Style d'icône : regular, solid, light, thin, sharp-solid, duotone, brands.
Afficher comme badge avec contour et arrière-plan transparent.
Réduire l'opacité pour indiquer un état inactif.
Classes CSS supplémentaires pour un style personnalisé.