Tag (Tag)

Utilisez un tag pour représenter un mot-clé, un filtre ou un état sélectionnable.

info

Ce composant est inclus dans l’offre Community.

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

Usage

• dsfr:tag peut être statique, cliquable, pressable ou supprimable.
• dsfr:tag:group est Pro pour les listes de tags.

Modes d'utilisation

Exemple principal

Tag · exemple principal

<twig:dsfr:tag:group>
  <twig:dsfr:tag label="Urbanisme" />
  <twig:dsfr:tag label="Prioritaire" type="pressable" pressed />
  <twig:dsfr:tag label="À retirer" type="dismissible" />
</twig:dsfr:tag:group>

Composition

Cette page expose aussi les sous-composants publics suivants : dsfr:tag: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:tag
  id="tag-example"
  class="fr-mt-2w"
  data-controller="tag"
/>

API publique

Composant	Rôle
dsfr:tag	Composant principal de cette page.
dsfr:tag: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	default	default, clickable, pressable, dismissible
href	string|null	Selon composant	URL de destination. Les URL sont normalisées.
size	enum	md	md, sm
icon	string|null	null	Classe d’icône DSFR, par exemple fr-icon-save-line.
pressed / disabled	bool	false	États des tags pressables/supprimables.
dsfr:tag:group	props	size	Taille commune du groupe.

Guide d'intégration

Question	Réponse
Famille DSFR	Interaction
Quand l'utiliser	Quand l’usager déclenche une action, ouvre une ressource, filtre une vue ou manipule une interaction ponctuelle.
Quand éviter	Pour structurer une page complète ou afficher un statut durable : utilisez plutôt un composant de contenu ou de feedback.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:tag, dsfr:tag:group.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Tag : composition avec 1 sous-composant

Variantes de tag

• 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.
• icône DSFR avec icon et placement contrôlé par la prop dédiée.
• état désactivé avec disabled quand l’action existe mais n’est pas disponible.

Points de contrôle propres à ce composant

• dsfr:tag peut être statique, cliquable, pressable ou supprimable.
• dsfr:tag:group est Pro pour les listes de tags.
• Testez la composition avec dsfr:tag:group sans copier les templates internes.
• Contrôlez le rendu lien/action selon la présence de href et le libellé annoncé au clavier.
• Contrôlez l’icône, son placement et le libellé accessible quand l’icône porte seule l’action.

Accessibilité interaction

• Le libellé d’action doit rester compréhensible hors contexte.
• Les icônes seules nécessitent un libellé accessible.
• Les actions indisponibles doivent utiliser disabled ou un état équivalent documenté.

Intégration Symfony/Twig pour dsfr:tag

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

Checklist de recette

• focus clavier visible
• libellé accessible vérifié
• état hover/focus/disabled cohérent
• 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.