Composant d'étiquette inline utilisé pour signaler un statut, une catégorie ou une petite information. Disponible en variantes colorées pleines, ghost et outline, avec trois modificateurs de taille.
Utilisez un <span> pour un badge purement décoratif
inline.
Si le badge est un lien ou une action, préférez un <a>
ou un <button>
avec les attributs d'accessibilité appropriés.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.badge |
<span> |
Classe de base. Applique le border-radius, la
bordure, le fond et le display: inline-flex. Requise
sur tous les badges.
|
.badge-{color} |
<span> |
Variante colorée pleine générée pour chaque couleur de la map $colors. Applique border-color, background-color
et color via --content-on-{color}.
|
.badge-{color}-ghost |
<span> |
Variante ghost : fond semi-transparent de la couleur, sans fond plein. |
.outline-{color} |
<span> |
Variante outline : bordure colorée sans fond. |
.badge-sm |
<span> |
Paddings réduits via --badge-padding-x-sm et --badge-padding-y-sm.
|
.badge-md |
<span> |
Paddings intermédiaires (par défaut). |
.badge-lg |
<span> |
Paddings augmentés via --badge-padding-x-lg et --badge-padding-y-lg.
|
.rounded-pill |
<span> |
Applique --border-radius-pill pour un badge en forme
de pilule.
|
Fond coloré plein. La couleur du texte est automatiquement définie via --content-on-{color} pour garantir le contraste.
Fond semi-transparent de la couleur, sans fond plein. Idéal pour les contextes où le badge doit rester discret.
Bordure colorée uniquement, sans fond. À combiner avec .badge
pour conserver la structure de base.
Border-radius maximum pour un badge en forme de pilule. Se combine avec n'importe quelle variante colorée.
Les modificateurs de taille s'appliquent sur chaque .badge individuellement
via les tokens CSS dédiés.
| TOKEN | RÔLE |
|---|---|
--badge-border-radius |
Rayon des coins du badge |
--badge-border-width |
Épaisseur de la bordure |
--badge-border-style |
Style de bordure (solid, dashed…)
|
--badge-border-color |
Couleur des bordures |
--badge-background-color |
Couleur de fond du badge |
--badge-padding-x |
Padding horizontal par défaut |
--badge-padding-y |
Padding vertical par défaut |
--badge-padding-x-sm |
Padding horizontal — taille sm |
--badge-padding-y-sm |
Padding vertical — taille sm |
--badge-padding-x-md |
Padding horizontal — taille md |
--badge-padding-y-md |
Padding vertical — taille md |
--badge-padding-x-lg |
Padding horizontal — taille lg |
--badge-padding-y-lg |
Padding vertical — taille lg |
--border-radius-pill |
Rayon maximum pour la variante pill (partagé avec d'autres composants) |
--content-on-{color} |
Couleur du texte sur fond coloré, définie par variante. Garantit le contraste sur chaque couleur de la map. |
/* Global variables */
:root {
--badge-border-radius: 4px;
--badge-padding-x: 0.75rem;
--badge-padding-y: 0.3rem;
}
/* Light theme */
:root[data-theme="light"] {
color-scheme:
light;
--badge-border-color: #222222;
}
/* Dark theme */
:root[data-theme="dark"] {
color-scheme:
dark;
--badge-border-color: #888888;
}
Toujours combiner .badge avec une classe de variante colorée
(.badge-{color}, .badge-{color}-ghost ou .outline-{color}).
Sans variante, le badge n'a pas de couleur définie.
Pour un badge avec forme pill, ajouter .rounded-pill directement sur
l'élément <span> en complément de la classe
colorée.
Ne pas utiliser .badge-sm, .badge-md
ou .badge-lg sans la classe de base .badge : les modificateurs de taille ne définissent que les paddings et
dépendent de la structure de base.
Les classes .badge-{color} sont générées automatiquement via une boucle
SCSS @each sur la map $colors.
Pour ajouter une nouvelle variante, il suffit d'ajouter une entrée dans la map.
Badge · WEBDEV-UI DOCS / V1