Badge
Étiquette courte pour un état, un compteur ou une catégorie
ATELIER INTERACTIF
Essayez Badge
Modifiez les propriétés. L’aperçu et le code sont rendus par Symfony et utilisent les mêmes props Twig.
APERÇU SERVEUR / TWIG RÉEL
Validé
Code Twig utilisable
<twig:ui:Badge tone="success" variant="soft">Validé</twig:ui:Badge>Exemples
Tons
Neutre
Primaire
Valide
En attente
En retard
Information
<twig:ui:Badge tone="success">Valide</twig:ui:Badge>
<twig:ui:Badge tone="danger">En retard</twig:ui:Badge>Variantes
Soft
Solid
Outline
<twig:ui:Badge tone="success" variant="soft">Valide</twig:ui:Badge>Props
| Prop | Défaut | Rôle |
|---|---|---|
tone | neutral | `neutral`, `primary`, `success`, `warning`, `danger`, `info` |
variant | soft | `soft`, `solid`, `outline` |
Accessibilité
- La teinte ne doit jamais être le seul porteur d'information : le texte du badge porte le sens.