DSFR v1.12.0

Retour

Tag (tag)

Le tag catégorise/classe/organise les contenus à l'aide de mots-clés. Il aide les utilisateurs à rechercher et à trouver facilement une information.

Documentation

Tag non cliquable

Tag simple sans interaction

Tag non cliquable sans icône

Libellé tag

<p class="fr-tag" id="tag-7887">Libellé tag</p>

Tag non cliquable icône à gauche

Libellé tag

<p class="fr-tag fr-icon-arrow-left-line fr-tag--icon-left" id="tag-7890">Libellé tag</p>

Tag non cliquable taille SM

Libellé tag

<p class="fr-tag fr-tag--sm" id="tag-7893">Libellé tag</p>

Tag cliquable

La balise utilisée pour le tag cliquable est un "a" s'il s'agit d'un lien (href), si pas de href utiliser "button".

Tag cliquable

Libellé tag 

<a class="fr-tag" id="tag-7896" href="#">Libellé tag</a>

Tag cliquable avec icône

Libellé tag 

<a class="fr-tag fr-icon-arrow-left-line fr-tag--icon-left" id="tag-7899" href="#">Libellé tag</a>

Tag cliquable SM

Libellé tag 

<a class="fr-tag fr-tag--sm" id="tag-7902" href="#">Libellé tag</a>

Tag cliquable accentué

Libellé tag 

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

Tag cliquable désactivé

Libellé tag 

<a class="fr-tag" id="tag-7908" aria-disabled="true" role="link">Libellé tag</a>

Tag bouton cliquable désactivé

<button class="fr-tag" id="tag-7911" disabled>Libellé tag</button>

Tag cliquable désactivé SM

Libellé tag 

<a class="fr-tag fr-tag--sm" id="tag-7914" aria-disabled="true" role="link">Libellé tag</a>

Tag sélectionnable

Le tag sélectionnable n'autorise pas l'accentuation.

Tag sélectionnable

<button class="fr-tag" aria-pressed="false" id="tag-7917">Libellé tag</button>

Tag sélectionnable avec icone

<button class="fr-tag fr-icon-information-line fr-tag--icon-left" aria-pressed="false" id="tag-7920">Libellé tag</button>

Tag sélectionnable taille sm

<button class="fr-tag fr-tag--sm" aria-pressed="false" id="tag-7923">Libellé tag</button>

Tag sélectionnable désactivé

<button class="fr-tag" aria-pressed="false" id="tag-7926" disabled>Libellé tag</button>

Tag supprimable

Le tag supprimable n'autorise ni accentuation ni icône personnalisée.
Le javascript présent dans l’attribut onclick est donné à titre d’exemple, à vous de l’implémenter dans votre contexte technique.

Tag supprimable

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

Tag supprimable taille sm

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

Tag supprimable désactivé

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

Groupe de tags

Lorsque que l'on a plus d'un tag, il convient d'utiliser un groupe de tags.
La taille de tous les tags peut être définie au niveau du groupe.

Groupe de tags non cliquables

  • Libellé tag 1

  • Libellé tag 2

  • Libellé tag 3

  • Libellé tag 4

  • Libellé tag 5

  • Libellé tag 6

  • Libellé tag 7

  • Libellé tag 8

  • Libellé tag 9

<ul class="fr-tags-group">
    <li>
        <p class="fr-tag" id="tag-7946">Libellé tag 1</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7947">Libellé tag 2</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7948">Libellé tag 3</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7949">Libellé tag 4</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7950">Libellé tag 5</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7951">Libellé tag 6</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7952">Libellé tag 7</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7953">Libellé tag 8</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7954">Libellé tag 9</p>
    </li>
</ul>

Groupe de tags non cliquables SM

  • Libellé tag 1

  • Libellé tag 2

  • Libellé tag 3

  • Libellé tag 4

  • Libellé tag 5

  • Libellé tag 6

  • Libellé tag 7

  • Libellé tag 8

  • Libellé tag 9

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <p class="fr-tag" id="tag-7965">Libellé tag 1</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7966">Libellé tag 2</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7967">Libellé tag 3</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7968">Libellé tag 4</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7969">Libellé tag 5</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7970">Libellé tag 6</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7971">Libellé tag 7</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7972">Libellé tag 8</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-7973">Libellé tag 9</p>
    </li>
</ul>

Groupe de tags cliquables

<ul class="fr-tags-group">
    <li>
        <a class="fr-tag" id="tag-7984" href="[À MODIFIER - url]">Libellé tag 1</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7985" href="[À MODIFIER - url]">Libellé tag 2</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7986" href="[À MODIFIER - url]">Libellé tag 3</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7987" href="[À MODIFIER - url]">Libellé tag 4</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7988" href="[À MODIFIER - url]">Libellé tag 5</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7989" href="[À MODIFIER - url]">Libellé tag 6</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7990" href="[À MODIFIER - url]">Libellé tag 7</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7991" href="[À MODIFIER - url]">Libellé tag 8</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-7992" href="[À MODIFIER - url]">Libellé tag 9</a>
    </li>
</ul>

Groupe de tags cliquables SM

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <a class="fr-tag" id="tag-8003" href="[À MODIFIER - url]">Libellé tag 1</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8004" href="[À MODIFIER - url]">Libellé tag 2</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8005" href="[À MODIFIER - url]">Libellé tag 3</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8006" href="[À MODIFIER - url]">Libellé tag 4</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8007" href="[À MODIFIER - url]">Libellé tag 5</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8008" href="[À MODIFIER - url]">Libellé tag 6</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8009" href="[À MODIFIER - url]">Libellé tag 7</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8010" href="[À MODIFIER - url]">Libellé tag 8</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-8011" href="[À MODIFIER - url]">Libellé tag 9</a>
    </li>
</ul>

Groupe de tags sélectionnables

<ul class="fr-tags-group">
    <li>
        <button class="fr-tag" id="tag-8022" aria-pressed="false">Libellé tag 1</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8023" aria-pressed="false">Libellé tag 2</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8024" aria-pressed="false">Libellé tag 3</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8025" aria-pressed="false">Libellé tag 4</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8026" aria-pressed="false">Libellé tag 5</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8027" aria-pressed="false">Libellé tag 6</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8028" aria-pressed="false">Libellé tag 7</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8029" aria-pressed="false">Libellé tag 8</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8030" aria-pressed="false">Libellé tag 9</button>
    </li>
</ul>

Groupe de tags sélectionnables SM

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <button class="fr-tag" id="tag-8041" aria-pressed="false">Libellé tag 1</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8042" aria-pressed="false">Libellé tag 2</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8043" aria-pressed="false">Libellé tag 3</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8044" aria-pressed="false">Libellé tag 4</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8045" aria-pressed="false">Libellé tag 5</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8046" aria-pressed="false">Libellé tag 6</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8047" aria-pressed="false">Libellé tag 7</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8048" aria-pressed="false">Libellé tag 8</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-8049" aria-pressed="false">Libellé tag 9</button>
    </li>
</ul>

Groupe de tags supprimables

<ul class="fr-tags-group">
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8060" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 1]">Libellé tag 1</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8061" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 2]">Libellé tag 2</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8062" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 3]">Libellé tag 3</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8063" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 4]">Libellé tag 4</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8064" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 5]">Libellé tag 5</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8065" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 6]">Libellé tag 6</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8066" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 7]">Libellé tag 7</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8067" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 8]">Libellé tag 8</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8068" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 9]">Libellé tag 9</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" id="tag-8079" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 1]">Libellé tag 1</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8080" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 2]">Libellé tag 2</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8081" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 3]">Libellé tag 3</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8082" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 4]">Libellé tag 4</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8083" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 5]">Libellé tag 5</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8084" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 6]">Libellé tag 6</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8085" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 7]">Libellé tag 7</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8086" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 8]">Libellé tag 8</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-8087" aria-label="Retirer [À MODIFIER - le filtre Libellé tag 9]">Libellé tag 9</button>
    </li>
</ul>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.