Badge
Utilisez le composant badge pour afficher statuts, libellés de version ou métadonnées en ligne, avec couleurs personnalisables et info-bulles au survol.
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<Badge>Badge</Badge>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>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>Choisissez entre des angles arrondis ou des badges en forme de pilule.
Badge Badge<Badge shape="rounded">Badge</Badge>
<Badge shape="pill">Badge</Badge>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>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>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>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>.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>colorstringdefault: grayVariante de couleur du badge.
Options : gray, blue, green, yellow, orange, red,
purple, white, surface, white-destructive, surface-destructive.
sizestringdefault: mdTaille du badge.
Options : xs, sm, md, lg.
shapestringdefault: roundedForme du badge.
Options : rounded, pill.
iconstringL’icône à afficher.
Options:
- Font Awesome nom d’icône, si vous avez la propriété
icons.libraryparamètres définie surfontawesomedans votredocs.json - Lucide nom d’icône, si vous avez la propriété
icons.libraryparamètres définie surlucidedans votredocs.json - Tabler nom d’icône, si vous avez la propriété
icons.libraryparamètres définie surtablerdans votredocs.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:
- Convertissez votre SVG avec le convertisseur SVGR.
- Collez votre code SVG dans le champ d’entrée SVG.
- Copiez l’élément complet
<svg>...</svg>depuis le champ de sortie JSX. - Enveloppez le code SVG compatible JSX dans des accolades :
icon={<svg ...> ... </svg>}. - Ajustez
heightetwidthselon vos besoins.
iconTypestringLe style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.
Options: regular, solid, light, thin, sharp-solid, duotone, brands.
strokebooleandefault: falseAfficher le badge avec un contour plutôt qu’un fond plein.
disabledbooleandefault: falseAfficher le badge dans un état désactivé avec une opacité réduite.
classNamestringClasses CSS supplémentaires à appliquer au badge.