Skip to main content
Utilisez des badges pour afficher des indicateurs d’état, des labels ou des metadata. Les badges peuvent être utilisés dans le corps du texte ou comme éléments autonomes.

​
Badge simple

Badge

​
Couleurs

Les badges proposent plusieurs variantes de couleur pour exprimer différentes significations. Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

​
Tailles

Les badges sont disponibles en quatre tailles pour s’adapter à la hiérarchie de votre contenu. Badge Badge Badge Badge

​
Formes

Choisissez entre des angles arrondis ou des badges en forme de pilule. Badge Badge

​
Icônes

Ajoutez des icônes aux badges pour apporter davantage de contexte. Badge Badge Badge

​
Variante contour

Utilisez la variante à contour pour un rendu plus subtil. Badge Badge Badge Badge

​
État désactivé

Désactivez les badges pour indiquer qu’ils sont inactifs ou indisponibles. Badge Badge

​
Utilisation en ligne

Les badges s’intègrent naturellement dans le texte. Par exemple, cette fonctionnalité nécessite un abonnement Premium, ou bien cet endpoint d’API renvoie un format JSON.

​
Propriétés combinées

Combinez plusieurs propriétés pour créer des styles de badge personnalisés. Premium Vérifié Bêta

​
Propriétés

​
string
défaut:"gray"
Variante de couleur du badge.Options : gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.
​
string
défaut:"md"
Taille du badge.Options : xs, sm, md, lg.
​
string
défaut:"rounded"
Forme du badge.Options : rounded, pill.
​
string
L’icône à afficher.Options :
  • nom de l’icône Font Awesome
  • nom de l’icône Lucide
  • code SVG (compatible JSX) entouré d’accolades
  • URL vers une icône hébergée en externe
  • chemin vers un fichier d’icône dans votre projet
Pour des icônes SVG personnalisées :
  1. Convertissez votre SVG à l’aide du convertisseur SVGR.
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Entourez le code SVG compatible JSX avec des accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width si nécessaire.
​
string
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options : regular, solid, light, thin, sharp-solid, duotone, brands.
​
boolean
défaut:"false"
Afficher le badge avec un contour plutôt qu’un fond plein.
​
boolean
défaut:"false"
Afficher le badge dans un état désactivé avec une opacité réduite.
​
string
Classes CSS supplémentaires à appliquer au badge.