Passer au contenu principal
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 
<Badge>Badge</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 
<Badge color="gray">Badge</Badge>
<Badge color="blue">Badge</Badge>
<Badge color="green">Badge</Badge>
<Badge color="yellow">Badge</Badge>
<Badge color="orange">Badge</Badge>
<Badge color="red">Badge</Badge>
<Badge color="purple">Badge</Badge>
<Badge color="white">Badge</Badge>
<Badge color="surface">Badge</Badge>
<Badge color="white-destructive">Badge</Badge>
<Badge color="surface-destructive">Badge</Badge>

​
Tailles

Les badges sont disponibles en quatre tailles pour s’adapter à la hiérarchie de votre contenu. Badge Badge Badge Badge 
<Badge size="xs">Badge</Badge>
<Badge size="sm">Badge</Badge>
<Badge size="md">Badge</Badge>
<Badge size="lg">Badge</Badge>

​
Formes

Choisissez entre des angles arrondis ou des badges en forme de pilule. Badge Badge 
<Badge shape="rounded">Badge</Badge>
<Badge shape="pill">Badge</Badge>

​
Icônes

Ajoutez des icônes aux badges pour apporter davantage de contexte. Badge Badge Badge 
<Badge icon="circle-check" color="green">Badge</Badge>
<Badge icon="clock" color="orange">Badge</Badge>
<Badge icon="ban" color="red">Badge</Badge>

​
Variante contour

Utilisez la variante à contour pour un rendu plus subtil. Badge Badge Badge Badge 
<Badge stroke color="blue">Badge</Badge>
<Badge stroke color="green">Badge</Badge>
<Badge stroke color="orange">Badge</Badge>
<Badge stroke color="red">Badge</Badge>

​
État désactivé

Désactivez les badges pour indiquer qu’ils sont inactifs ou indisponibles. Badge Badge 
<Badge disabled icon="lock" color="gray">Badge</Badge>
<Badge disabled icon="lock" color="blue">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. 
Cette fonctionnalité nécessite un abonnement <Badge color="orange" size="sm">Premium</Badge>.

​
Propriétés combinées

Combinez plusieurs propriétés pour créer des styles de badge personnalisés. Premium Vérifié Bêta 
<Badge icon="star" color="blue" size="lg" shape="pill">Premium</Badge>
<Badge icon="check" stroke color="green" size="sm">Vérifié</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">Bêta</Badge>

​
Propriétés

​
color
string
défaut:"gray"
Variante de couleur du badge.Options : gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.
​
size
string
défaut:"md"
Taille du badge.Options : xs, sm, md, lg.
​
shape
string
défaut:"rounded"
Forme du badge.Options : rounded, pill.
​
icon
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
  • 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.
​
iconType
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.
​
stroke
boolean
défaut:"false"
Afficher le badge avec un contour plutôt qu’un fond plein.
​
disabled
boolean
défaut:"false"
Afficher le badge dans un état désactivé avec une opacité réduite.
​
className
string
Classes CSS supplémentaires à appliquer au badge.