Skip to main content
Utilisez des badges pour afficher des indicateurs d’état, des labels ou des metadata. Placez des badges 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:
  • Font Awesome nom d’icône, si vous avez la propriété icons.library paramètres définie sur fontawesome dans votre docs.json
  • Lucide nom d’icône, si vous avez la propriété icons.library paramètres définie sur lucide dans votre docs.json
  • Tabler nom d’icône, si vous avez la propriété icons.library paramètres définie sur tabler dans votre docs.json
  • URL vers une icône hébergée en externe
  • Chemin vers un fichier d’icône dans votre projet
  • Code SVG entouré d’accolades
Pour les icônes SVG personnalisées:
  1. Convertissez votre SVG avec le convertisseur SVGR.
  2. Collez votre code SVG dans le champ d’entrée SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Enveloppez le code SVG compatible JSX dans des accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width selon vos besoins.
​
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.