--- title: Étiquette (Badge) description: "Étiquettes inline pour le statut, les catégories et les métadonnées -- 11 variantes de couleurs, 4 tailles, icônes et formes pilule ou contours en trait." --- Utilisez le composant `` 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 ```mdx Default ``` ## Couleurs Les badges sont disponibles en 11 variantes de couleurs pour transmettre différentes significations :
Gray Blue Green Yellow Orange Red Purple
```mdx Gray Blue Green Yellow Orange Red Purple ``` ### Couleurs de surface Pour les badges qui s'adaptent à l'arrière-plan de la page :
White Surface
```mdx White Surface ``` ### Couleurs destructives Pour les états d'avertissement ou d'erreur :
White Destructive Surface Destructive
```mdx White Destructive Surface Destructive ``` ## Avec des icônes Ajoutez des icônes pour rendre les badges plus descriptifs :
Verified Featured New Pending
```mdx Verified Featured New Pending ``` ### Types d'icônes Spécifiez un style d'icône différent en utilisant `iconType` :
Solid Regular Duotone GitHub
```mdx Solid Regular Duotone GitHub ``` ## Tailles Quatre tailles sont disponibles pour s'adapter à différents contextes :
Extra Small Small Medium Large
```mdx Extra Small Small Medium Large ``` ## Formes Choisissez entre des coins arrondis ou une forme pilule :
Rounded Pill
```mdx Rounded Pill ``` ## Variante contour Utilisez des badges avec contour pour un poids visuel plus léger :
Outlined Blue Outlined Green Outlined Red Outlined Purple
```mdx Outlined Blue Outlined Green Outlined Red Outlined Purple ``` ## État désactivé Réduisez l'opacité pour les badges inactifs :
Inactive Disabled
```mdx Inactive Disabled ``` ## 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. ```mdx This feature requires a Premium subscription. You can also mark items as New or Deprecated. ``` ## 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é. ## Et ensuite ? Parcourir tous les composants disponibles Apprendre à utiliser les composants en MDX