Tag

Le tag est un élément d’indication ou d’interaction (selon les contextes) permettant de catégoriser, classer, organiser les contenus d’un site à l’aide de mots clés. Il aide les usagers à rechercher et à trouver facilement une information.

HTML

Structure du composant

Le composant Tag est un élément permettant de marquer ou de catégoriser des éléments et peut être utilisé dans deux contextes :

  • Dans le contenu (carte, en-tête, liste) : il catégorise le contenu auquel il est apposé. Il peut être cliquable ou non cliquable.
  • En tant que filtre (dans une page de résultats de recherche par exemple). Dans ce cas il peut-être :
    • activable comme filtre en place à sélectionner/désélectionner,
    • supprimable, il sert de rappel à un filtre qui a été coché dans une sidebar ou une liste déroulante.

Tag non cliquable

Sa structure est la suivante :

  • Le Tag est un élément HTML <p> défini par la classe fr-tag.

Exemple de Tag non cliquable

<p class="fr-tag">Libellé tag non cliquable</p>

Tag cliquable

Sa structure est la suivante :

  • Le Tag cliquable est un élément HTML <a> ou <button> avec la classe fr-tag.

Exemple de Tag cliquable

<a href="#" class="fr-tag">Tag cliquable lien</a>
<button type="button" class="fr-tag">Libellé tag cliquable bouton</a>

Tag activable

Sa structure est la suivante :

  • Le Tag activable est un élément HTML <button> avec la classe fr-tag et l'attribut aria-pressed, sa valeur [true|false] défini si le tag est activé.

Exemple de Tag activable

<button type="button" class="fr-tag" aria-pressed="false">Libellé tag activable</button>

Tag supprimable

Sa structure est la suivante :

  • Le Tag activable est un élément HTML <button> avec les classes fr-tag et fr-tag--dismiss.

Exemple de Tag supprimable

<button class="fr-tag fr-tag--dismiss" type="button" aria-label="Retirer [À MODIFIER - le filtre Libellé tag supprimable]">Libellé tag supprimable</button>

Groupe de tags

Les tags peuvent être utilisés à plusieurs dans des groupes de tags fr-tags-group. Dans ce cas-là ils appliquent des espacement préalablement définis par le DSFR.

Exemple de groupe de tags

<ul class="fr-tags-group">
    <li>
        <p class="fr-tag">Libellé tag 1</p>
    </li>
    <li>
        <p class="fr-tag">Libellé tag 2</p>
    </li>
    <li>
        <p class="fr-tag">Libellé tag 3</p>
    </li>
</ul>

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core et des tags doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger. 

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/tag/tag.min.css" rel="stylesheet">

NB : Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé : 

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/tag/tag.legacy.min.css" rel="stylesheet">

Variantes de tailles

Le tag est disponible en deux variantes de tailles :

  • En taille MD : par défaut.
  • En taille SM : définie par la classe fr-tag--sm.

Exemples de variantes de taille

<p class="fr-tag fr-tag--sm">Libellé tag non cliquable taille SM</p>
<a class="fr-tag fr-tag--sm" href="#">Libellé tag cliquable taille SM</a>
<button class="fr-tag fr-tag--sm" aria-pressed="false" type="button">Libellé tag activable taille SM</button>
<button class="fr-tag fr-tag--sm fr-tag--dismiss" type="button" aria-label="Retirer [À MODIFIER - le filtre Libellé tag taille SM]">Libellé tag supprimable taille SM</button>

Variante avec icône

Le tag peut avoir une icône juxtaposée à gauche, elle est ajoutée via la classe utilitaire d'icône fr-icon--NOM-ICONE (voir Icônes ), associée à une classe de positionnement de l'icône fr-tag--icon-left.

Exemples de variantes avec icône

<p class="fr-tag fr-icon-arrow-left-line fr-tag--icon-left">Libellé tag non cliquable avec icône</p>
<a class="fr-tag fr-icon-arrow-left-line fr-tag--icon-left" href="#">Libellé tag cliquable avec icône</a>
<button class="fr-tag fr-icon-information-line fr-tag--icon-left" aria-pressed="false" type="button">Libellé tag activable avec icône</button>

Variante désactivée

Le style désactivé du tag cliquable est appliqué par le retrait de l'attribut href sur l'élément <a> ou par l'ajout de l'attribut disabled sur l'élément <button>. Le tag est alors grisé et les effets au survol et au clic sont retirés. Le pointeur de la souris prend la valeur "not-allowed" au survol du bouton ce qui change son style. Sur le tag cliquable désactivé avec l'élément <a>, l'attribut role="link" et aria-disabled seront nécessaires pour les technologies d'assistance.

Exemples de variantes désactivées

<a class="fr-tag" aria-disabled="true" role="link">Libellé tag cliquable désactivé</a>
<button class="fr-tag" type="button" disabled>Libellé tag cliquable désactivé</button>
<button class="fr-tag" aria-pressed="false" type="button" disabled>Libellé tag activable désactivé</button>
<button class="fr-tag fr-tag--dismiss" type="button" aria-label="Retirer [À MODIFIER - le filtre Libellé tag supprimable désactivé]" disabled>Libellé tag supprimable désactivé</button>

Accentuation

Le tag cliquable est accentuable, permettant le changement de la couleur de fond. Pour cela, ajouter la classe fr-tag--NOM-COULEUR au même niveau que la classe fr-tag.

Exemple de variante accentuée

<a class="fr-tag fr-tag--green-emeraude" href="#">Libellé tag cliquable accentué</a>

Variantes de taille du groupe de tag

Le groupe de tag est disponible en deux variantes de tailles :

  • En taille MD : par défaut.
  • En taille SM : définie par la classe fr-tags-group--sm.

Exemples de variantes de taille

Groupe de tags non cliquables SM

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <p class="fr-tag">Libellé tag non cliquable SM 1</p>
    </li>
    <li>
        <p class="fr-tag">Libellé tag non cliquable SM 2</p>
    </li>
    <li>
        <p class="fr-tag">Libellé tag non cliquable SM 3</p>
    </li>
</ul>

Groupe de tags cliquables SM

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <a class="fr-tag" href="#">Libellé tag cliquable SM 1</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Libellé tag cliquable SM 2</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Libellé tag cliquable SM 3</a>
    </li>
</ul>

Groupe de tags sélectionnables SM

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <button class="fr-tag" type="button" aria-pressed="false">Libellé tag sélectionnable SM 1</button>
    </li>
    <li>
        <button class="fr-tag" type="button" aria-pressed="false">Libellé tag sélectionnable SM 2</button>
    </li>
    <li>
        <button class="fr-tag" type="button" aria-pressed="false">Libellé tag sélectionnable SM 3</button>
    </li>
</ul>

Groupe de tags supprimables SM

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <button class="fr-tag fr-tag--dismiss" type="button" aria-label="Retirer [À MODIFIER - le filtre Libellé tag supprimable SM 1]">Libellé tag supprimable SM 1</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" type="button" aria-label="Retirer [À MODIFIER - le filtre Libellé tag supprimable SM 2]">Libellé tag supprimable SM 2</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" type="button" aria-label="Retirer [À MODIFIER - le filtre Libellé tag supprimable SM 3]">Libellé tag supprimable SM 3</button>
    </li>
</ul>

JavaScript

Installation du JavaScript

Pour fonctionner, le composant Tag nécessite l'utilisation de JavaScript pour les tags activables supprimables. Chaque composant utilisant JavaScript possède un fichier JS spécifique et requiert le fichier JS du core.

Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant </body>) : 

<script type="module" src="dist/core/core.module.min.js"></script>
<script type="module" src="dist/component/tag/tag.module.min.js"></script>

NB: Il est aussi possible d'importer le JS global du DSFR dsfr.module.js

Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé : 

<script type="text/javascript" nomodule href="dist/legacy/legacy.nomodule.min.js" ></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/component/tag/tag.nomodule.min.js"></script>

Une fois le JavaScript chargé, le composant fonctionne automatiquement.

Instances

Sur le Tag, les éléments suivants sont instanciés :

  • Le Tag activable, via la classe : fr-tag et l'attribut aria-pressed.
  • Le Tag supprimable, via la classe fr-tag--dismiss.

Une fois chargé, le JS ajoute un attribut data-fr-js-NOM_INSTANCE="true" sur chacun des éléments instanciés.

API

Il est possible d'interagir avec les instances du composant en JavaScript via une API.

Cette API est disponible depuis la méthode window.dsfr(instance) du core.

Exemple :

const elem = document.getElementById('ID_TAG');
dsfr(elem).tagDismissible.isEnabled;

L'ensemble des propriétés et méthodes disponibles sont définies ci-après :

toggle
isEnabled
Description Défini si le fonctionnement du tag activable est activé ou non
Type property
Retour Boolean
Exemple dsfr(elem).toggle.isEnabled = false
pressed
Description Renvoi l'état du tag activable
Type property
Retour Boolean
Exemple dsfr(elem).toggle.pressed = false
toggle
Description Fait varier l'état checked/unchecked et la valeur de l'attribut aria-pressed du tag activable
Type function
Arguments none
Retour none
Exemple dsfr(elem).toggle.toggle()
node
Description Renvoie le noeud HTML de l'élément.
Type property
Retour DOMElement
Exemple dsfr(elem).toggle.node
tagDismissible
isEnabled
Description Défini si le fonctionnement du tag supprimable est activé ou non
Type property
Retour Boolean
Exemple dsfr(elem).tagDismissible.isEnabled = false
node
Description Renvoie le noeud HTML de l'élément.
Type property
Retour DOMElement
Exemple dsfr(elem).tagDismissible.node

Événements

Le Système de Design fournit des événements personnalisés pour les actions uniques de la part de certains composants réactifs listés sur la page de l' API Javascript .

Sur le tag, les événements suivants sont disponibles :

événements
Événement Action Élément Attribut
dsfr.dismiss Suppression du tag supprimable TagDismissible data-fr-js-tag-dismissible
dsfr.click Click sur le tag supprimable TagDismissible data-fr-js-tag-dismissible
dsfr.click Click sur le tag sélectionnable Toggle data-fr-js-toggle

Note de version

Voir les évolutions sur github

v1.13.1 - 26 mars 2025

bug hover tags sélectionnables désactivés

  • Correction du hover des tags sélectionnables désactivés

🐛 fix

tag

#1058

v1.11.2 - 4 mars 2024

corrige le hover des tags cliquables

  • le hover des tags cliquables avait disparu

🐛 fix

tag

#887

v1.11.0 - 11 décembre 2023

token de couleur du tag selectionnable

  • utilisation du token $text-inverted-blue-france sur la couleur du texte des tag selectionnable et supprimable à la place de $text-inverted-grey
  • remplacement du token de couleur de fond des tag selectionnable par $background-active-blue-france au lieu de $background-action-high-blue-france

🐛 fix

tag

#780

v1.10.0 - 19 juillet 2023

retrait du z-index

  • retrait du z-index: 1 qui pose problème dans une modale avec footer.

🐛 fix

link

button

tag

badge

#630

v1.8.5 - 28 novembre 2022

correction régression lien tag

fix

tag

#480

v1.8.2 - 9 novembre 2022

déplacement du focus sur les tags supprimables

fix

tag

#453

v1.8.0 - 27 octobre 2022

correction tag selectionnable hover

fix

tag

#430

v1.6.0 - 14 juin 2022

correctif icône lien extérieur

fix

core

link

button

tag

card

#333

correction espacements des groupes

refactor

header

link

button

follow

share

tag

badge

#311

v1.4.1 - 29 mars 2022

correction tag activable sm et dans un group sm

fix

tag

#258

v1.3.0 - 18 janvier 2022

sélectionnable

fix

tag

#189

role & aria link disabled

fix

link

tag

pagination

share

#181

correctif js tag

  • fix(core): correctif js
  • fix(tag): correctif js

fix

tag

#180

Ajout des composants tag activable et tag supprimable

feat

tag

#166

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github