Le badge étiquette un élément avec une information courte : statut, compteur, catégorie. Il se décline en 9 variantes sémantiques et peut être rendu comme n'importe quelle balise HTML.
Neuf variantes disponibles via la prop variant.
Choisir selon le sens sémantique, pas la couleur souhaitée.
as="a".
<twig:Badge variant="default">Default</twig:Badge>
<twig:Badge variant="secondary">Secondary</twig:Badge>
<twig:Badge variant="destructive">Destructive</twig:Badge>
<twig:Badge variant="outline">Outline</twig:Badge>
<twig:Badge variant="ghost">Ghost</twig:Badge>
<twig:Badge variant="link">Link</twig:Badge>
<twig:Badge variant="info">Info</twig:Badge>
<twig:Badge variant="success">Success</twig:Badge>
<twig:Badge variant="warning">Warning</twig:Badge>
as)
Par défaut le composant rend un <span>. La prop as
permet de changer la balise. Par exemple a pour un badge lien.
<twig:Badge variant="default">span (défaut)</twig:Badge>
<twig:Badge as="a" variant="link" href="#">lien cliquable</twig:Badge>
Le contenu du badge est un block Twig: on peut y mettre du texte, une icône, ou n'importe quelle combinaison.
<twig:Badge variant="success">
{{ ux_icon('bi:check-circle') }} Validé
</twig:Badge>
| Prop / Block | Type | Défaut | Description |
|---|---|---|---|
variant |
string | 'default' |
Style visuel. Valeurs : default secondary destructive outline ghost link info success warning. |
as |
string | 'span' |
Balise HTML rendue. Ex : a pour un badge lien. |
block content |
block | Contenu du badge (texte, icône…). Passé entre les balises ouvrante et fermante. |
as="a" avec variant="link" pour un badge cliquable
destructive pour une information neutre
span comme bouton : utiliser as="a" ou twig:Button
Toujours utiliser <twig:Badge>.
Ne jamais coder un badge manuellement avec des classes utilitaires.
Un badge span n'est pas interactif. Pour un élément cliquable,
passer as="a" ou utiliser twig:Button.