Badge (Badge)

Utilisez un badge pour qualifier un statut, une catégorie ou une information courte.

info

Ce composant est inclus dans l’offre Community.

Information	Valeur
Niveau	Community
Composants Twig	dsfr:badge, dsfr:badge:group

Usage

• dsfr:badge est Community.
• dsfr:badge:group est Pro et sert à aligner plusieurs badges.

Modes d'utilisation

Exemple principal

Badge · exemple principal

<twig:dsfr:badge:group>
  <twig:dsfr:badge label="Nouveau" type="new" />
  <twig:dsfr:badge label="Prioritaire" type="warning" noIcon />
</twig:dsfr:badge:group>

Composition

Cette page expose aussi les sous-composants publics suivants : dsfr:badge:group. Utilisez-les quand vous devez contrôler précisément la structure Twig au lieu de passer un tableau de données.

astuce

Préférez les sous-composants publics aux include, macros ou copies de templates internes. Cela garde votre code aligné avec les évolutions du bundle.

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:badge
  id="badge-example"
  class="fr-mt-2w"
  data-controller="badge"
/>

API publique

Composant	Rôle
dsfr:badge	Composant principal de cette page.
dsfr:badge:group	Sous-composant public utilisable en composition Twig.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
label	string	Requis	Libellé visible du contrôle.
type	enum|null	null	new, info, success, warning, error, couleurs DSFR (blue-cumulus, green-emeraude, purple-glycine, etc.)
size	enum	md	md, sm
noIcon	bool	false	Masque l’icône automatique des badges d’état.
dsfr:badge:group	slot	Optionnel	Aligne plusieurs badges.

Guide d'intégration

Question	Réponse
Famille DSFR	Feedback
Quand l'utiliser	Quand l’interface doit qualifier un état, attirer l’attention ou confirmer une action.
Quand éviter	Pour structurer une page complète : gardez ces composants ponctuels et proches du contenu concerné.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:badge, dsfr:badge:group.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Badge : composition avec 1 sous-composant

Variantes de badge

• tailles disponibles via size quand le DSFR expose une variante compacte ou large.
• types métier via type pour adapter le sens visuel et sémantique.

Points de contrôle propres à ce composant

• dsfr:badge est Community.
• dsfr:badge:group est Pro et sert à aligner plusieurs badges.
• Testez la composition avec dsfr:badge:group sans copier les templates internes.

Accessibilité feedback

• Le message doit être autonome et compréhensible sans couleur seule.
• Utilisez alertRole seulement pour les messages ajoutés dynamiquement qui doivent être annoncés immédiatement.
• Gardez les libellés courts et actionnables.

Intégration Symfony/Twig pour dsfr:badge

• Composez avec les sous-composants publics dsfr:badge:group quand le rendu doit être plus précis que les props.
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:badge quand ils concernent son nœud racine.

Checklist de recette

• message compréhensible sans icône
• contraste en thème clair et sombre
• comportement de fermeture si dismissible
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.