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