Badge Component
CSS-only Tailwind CSS badge with primary, secondary, accent, info, success, warning, and error variants. Soft, outline, and ghost styles, sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Les composants du badge sont de petites étiquettes compactes utilisées pour mettre en évidence, catégoriser ou afficher des informations d'état. Construits avec du HTML sémantique et du CSS Tailwind, les badges prennent en charge plusieurs tailles, couleurs et styles pour une intégration flexible dans les tableaux, cartes, profils utilisateur et systèmes de notification. Légers et accessibles, les badges améliorent la hiérarchie des informations sans ajouter d'encombrement visuel.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| badge | Base | Petite étiquette en ligne |
| badge-outline | Style | Remplissage transparent avec bordure colorée |
| badge-soft | Style | Fond teinté en sourdine |
| badge-ghost | Style | Fond subtil sans bordure |
| badge-dashed | Style | Style de bordure en pointillés |
| badge-pill | Style | Forme de pilule entièrement arrondie |
| badge-rounded | Style | Arrondi modéré |
| badge-circle | Style | Cercle de même largeur pour les caractères simples ou les chiffres |
| badge-square | Style | Carré sans arrondi |
| badge-xs | Taille | Très petit |
| badge-sm | Taille | Petit |
| badge-md | Taille | Moyen (par défaut) |
| badge-lg | Taille | Grand |
| badge-xl | Taille | Très grand |
| badge-2xl | Taille | 2× très grand |
| badge-primary | Couleur | Couleur du thème principal |
| badge-secondary | Couleur | Couleur du thème secondaire |
| badge-accent | Couleur | Couleur du thème d'accentuation |
| badge-neutral | Couleur | Couleur du thème neutre |
| badge-info | Couleur | Couleur sémantique de l'information |
| badge-success | Couleur | Couleur sémantique du succès |
| badge-warning | Couleur | Couleur sémantique d’avertissement |
| badge-error | Couleur | Couleur sémantique des erreurs |
Utilisation de base
Badge
<span class="badge">Badge</span> |
<span className="badge">Badge</span> |
Tailles des badges
Xsmall
Small
Medium
Large
Xlarge
2XLarge
html
1 2 3 4 5 6 | <span class="badge badge-xs">Xsmall</span> <span class="badge badge-sm">Small</span> <span class="badge badge-md">Medium</span> <span class="badge badge-lg">Large</span> <span class="badge badge-xl">Xlarge</span> <span class="badge badge-2xl">2XLarge</span> |
Couleurs des badges
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-accent">Accent</span> <span class="badge badge-info">Info</span> <span class="badge badge-success">Success</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-error">Error</span> <span class="badge badge-neutral">Neutral</span> |
Styles de badges
Insignes souples
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-soft">Default</span> <span class="badge badge-soft badge-primary">Primary</span> <span class="badge badge-soft badge-secondary">Secondary</span> <span class="badge badge-soft badge-accent">Accent</span> <span class="badge badge-soft badge-info">Info</span> <span class="badge badge-soft badge-success">Success</span> <span class="badge badge-soft badge-warning">Warning</span> <span class="badge badge-soft badge-error">Error</span> <span class="badge badge-soft badge-neutral">Neutral</span> |
Insignes de contour
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-outline">Default</span> <span class="badge badge-outline badge-primary">Primary</span> <span class="badge badge-outline badge-secondary">Secondary</span> <span class="badge badge-outline badge-accent">Accent</span> <span class="badge badge-outline badge-info">Info</span> <span class="badge badge-outline badge-success">Success</span> <span class="badge badge-outline badge-warning">Warning</span> <span class="badge badge-outline badge-error">Error</span> <span class="badge badge-outline badge-neutral">Neutral</span> |
Insignes en pointillés
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-dashed">Default</span> <span class="badge badge-dashed badge-primary">Primary</span> <span class="badge badge-dashed badge-secondary">Secondary</span> <span class="badge badge-dashed badge-accent">Accent</span> <span class="badge badge-dashed badge-info">Info</span> <span class="badge badge-dashed badge-success">Success</span> <span class="badge badge-dashed badge-warning">Warning</span> <span class="badge badge-dashed badge-error">Error</span> <span class="badge badge-dashed badge-neutral">Neutral</span> |
Insignes fantômes
Ghost
html
<span class="badge badge-ghost">Ghost</span> |
Formes de badges
Insigne arrondi
10
html
<span class="badge badge-error badge-rounded">10</span> |
Insigne de pilule
Pill badge
html
<span class="badge badge-warning badge-pill">Pill badge</span> |
Insigne carré
99+
html
<span class="badge badge-neutral badge-square">99+</span> |
Insigne de cercle
html
1 2 3 | <span class="badge badge-success badge-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg> </span> |
Indicateurs de badge
Les badges vides sont parfaits pour les indicateurs d'état ou les points de notification.
html
1 2 3 4 5 | <span class="badge badge-primary badge-circle badge-lg"></span> <span class="badge badge-primary badge-lg"></span> <span class="badge badge-primary badge-md"></span> <span class="badge badge-primary badge-sm"></span> <span class="badge badge-primary badge-xs"></span> |
Composition des insignes
Intégrez des badges avec des icônes ou imbriquez-les dans d'autres composants comme des boutons.
Insigne avec icône
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="badge badge-info"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Info </span> <span class="badge badge-success"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m9 12 2 2 4-4"></path> </svg> Success </span> <span class="badge badge-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> Warning </span> <span class="badge badge-error"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.9 4.9 14.2 14.2"></path> </svg> Error </span> |
Badge à l'intérieur du bouton
html
1 2 3 4 5 6 7 8 | <button class="btn btn-primary btn-sm btn-active"> Message <span class="badge badge-primary badge-xs">+49</span> </button> <button class="btn btn-sm"> Inbox <span class="badge badge-xs badge-primary">+27</span> </button> |