Badge

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.

Variantes

Neuf variantes disponibles via la prop variant. Choisir selon le sens sémantique, pas la couleur souhaitée.

Default Secondary Destructive Outline Ghost Link Info Success Warning

default Fond primaire plein. Mise en avant forte.

secondary État neutre, archivé, inactif.

destructive Erreur, suppression, action dangereuse.

outline Fond transparent, bordure visible. Sur fonds colorés.

ghost Fond transparent, hover discret.

link Style lien souligné. À combiner avec as="a".

info Information contextuelle.

success Actif, validé, opérationnel.

warning En attente, à surveiller.

<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>

Tag HTML (`as`)

Par défaut le composant rend un <span>. La prop as permet de changer la balise. Par exemple a pour un badge lien.

span (défaut) lien cliquable

<twig:Badge variant="default">span (défaut)</twig:Badge>
<twig:Badge as="a" variant="link" href="#">lien cliquable</twig:Badge>

Contenu libre

Le contenu du badge est un block Twig: on peut y mettre du texte, une icône, ou n'importe quelle combinaison.

Validé Erreur En attente

<twig:Badge variant="success">
    {{ ux_icon('bi:check-circle') }} Validé
</twig:Badge>

API du composant

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.

Do & Don't

Choisir la variante selon le sens sémantique, pas la couleur souhaitée
Utiliser as="a" avec variant="link" pour un badge cliquable
Garder le contenu court : 1 à 3 mots maximum

Ne pas utiliser destructive pour une information neutre
Ne pas surcharger une interface avec des badges de variantes différentes
Ne pas utiliser un badge span comme bouton : utiliser as="a" ou twig:Button

Règles

Règle

Toujours utiliser <twig:Badge>. Ne jamais coder un badge manuellement avec des classes utilitaires.