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

Label tag

<p class="fr-tag" id="tag-6171">Label tag</p>

Tag non cliquable icône à gauche

Label tag

<p class="fr-tag fr-icon-arrow-left-line fr-tag--icon-left" id="tag-6174">Label tag</p>

Tag non cliquable taille SM

Label tag

<p class="fr-tag fr-tag--sm" id="tag-6177">Label 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

Label tag 

<a class="fr-tag" id="tag-6180" href="#">Label tag</a>

Tag cliquable avec icône

Label tag 

<a class="fr-tag fr-icon-arrow-left-line fr-tag--icon-left" id="tag-6183" href="#">Label tag</a>

Tag cliquable SM

Label tag 

<a class="fr-tag fr-tag--sm" id="tag-6186" href="#">Label tag</a>

Tag cliquable accentué

Label tag 

<a class="fr-tag fr-tag--green-emeraude" id="tag-6189" href="#">Label tag</a>

Tag cliquable désactivé

Label tag 

<a class="fr-tag" id="tag-6192" aria-disabled="true" role="link">Label tag</a>

Tag bouton cliquable désactivé

<button class="fr-tag" id="tag-6195" disabled>Label tag</button>

Tag cliquable désactivé SM

Label tag 

<a class="fr-tag fr-tag--sm" id="tag-6198" aria-disabled="true" role="link">Label 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-6201">Label tag</button>

Tag sélectionnable avec icone

<button class="fr-tag fr-icon-information-line fr-tag--icon-left" aria-pressed="false" id="tag-6204">Label tag</button>

Tag sélectionnable taille sm

<button class="fr-tag fr-tag--sm" aria-pressed="false" id="tag-6207">Label tag</button>

Tag sélectionnable désactivé

<button class="fr-tag" aria-pressed="false" id="tag-6210" disabled>Label 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-6213" aria-label="Retirer [À MODIFIER - le filtre Label tag]">Label tag</button>

Tag supprimable taille sm

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

Tag supprimable désactivé

<button class="fr-tag fr-tag--dismiss" id="tag-6219" aria-label="Retirer [À MODIFIER - le filtre Label tag]" disabled>Label 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

  • Label tag 1

  • Label tag 2

  • Label tag 3

  • Label tag 4

  • Label tag 5

  • Label tag 6

  • Label tag 7

  • Label tag 8

  • Label tag 9

<ul class="fr-tags-group">
    <li>
        <p class="fr-tag" id="tag-6230">Label tag 1</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6231">Label tag 2</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6232">Label tag 3</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6233">Label tag 4</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6234">Label tag 5</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6235">Label tag 6</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6236">Label tag 7</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6237">Label tag 8</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6238">Label tag 9</p>
    </li>
</ul>

Groupe de tags non cliquables SM

  • Label tag 1

  • Label tag 2

  • Label tag 3

  • Label tag 4

  • Label tag 5

  • Label tag 6

  • Label tag 7

  • Label tag 8

  • Label tag 9

<ul class="fr-tags-group fr-tags-group--sm">
    <li>
        <p class="fr-tag" id="tag-6249">Label tag 1</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6250">Label tag 2</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6251">Label tag 3</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6252">Label tag 4</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6253">Label tag 5</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6254">Label tag 6</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6255">Label tag 7</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6256">Label tag 8</p>
    </li>
    <li>
        <p class="fr-tag" id="tag-6257">Label tag 9</p>
    </li>
</ul>

Groupe de tags cliquables

<ul class="fr-tags-group">
    <li>
        <a class="fr-tag" id="tag-6268" href="[À MODIFIER - url]">Label tag 1</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6269" href="[À MODIFIER - url]">Label tag 2</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6270" href="[À MODIFIER - url]">Label tag 3</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6271" href="[À MODIFIER - url]">Label tag 4</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6272" href="[À MODIFIER - url]">Label tag 5</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6273" href="[À MODIFIER - url]">Label tag 6</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6274" href="[À MODIFIER - url]">Label tag 7</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6275" href="[À MODIFIER - url]">Label tag 8</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6276" href="[À MODIFIER - url]">Label 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-6287" href="[À MODIFIER - url]">Label tag 1</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6288" href="[À MODIFIER - url]">Label tag 2</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6289" href="[À MODIFIER - url]">Label tag 3</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6290" href="[À MODIFIER - url]">Label tag 4</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6291" href="[À MODIFIER - url]">Label tag 5</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6292" href="[À MODIFIER - url]">Label tag 6</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6293" href="[À MODIFIER - url]">Label tag 7</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6294" href="[À MODIFIER - url]">Label tag 8</a>
    </li>
    <li>
        <a class="fr-tag" id="tag-6295" href="[À MODIFIER - url]">Label tag 9</a>
    </li>
</ul>

Groupe de tags sélectionnables

<ul class="fr-tags-group">
    <li>
        <button class="fr-tag" id="tag-6306" aria-pressed="false">Label tag 1</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6307" aria-pressed="false">Label tag 2</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6308" aria-pressed="false">Label tag 3</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6309" aria-pressed="false">Label tag 4</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6310" aria-pressed="false">Label tag 5</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6311" aria-pressed="false">Label tag 6</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6312" aria-pressed="false">Label tag 7</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6313" aria-pressed="false">Label tag 8</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6314" aria-pressed="false">Label 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-6325" aria-pressed="false">Label tag 1</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6326" aria-pressed="false">Label tag 2</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6327" aria-pressed="false">Label tag 3</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6328" aria-pressed="false">Label tag 4</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6329" aria-pressed="false">Label tag 5</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6330" aria-pressed="false">Label tag 6</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6331" aria-pressed="false">Label tag 7</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6332" aria-pressed="false">Label tag 8</button>
    </li>
    <li>
        <button class="fr-tag" id="tag-6333" aria-pressed="false">Label tag 9</button>
    </li>
</ul>

Groupe de tags supprimables

<ul class="fr-tags-group">
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6344" aria-label="Retirer [À MODIFIER - le filtre Label tag 1]">Label tag 1</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6345" aria-label="Retirer [À MODIFIER - le filtre Label tag 2]">Label tag 2</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6346" aria-label="Retirer [À MODIFIER - le filtre Label tag 3]">Label tag 3</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6347" aria-label="Retirer [À MODIFIER - le filtre Label tag 4]">Label tag 4</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6348" aria-label="Retirer [À MODIFIER - le filtre Label tag 5]">Label tag 5</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6349" aria-label="Retirer [À MODIFIER - le filtre Label tag 6]">Label tag 6</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6350" aria-label="Retirer [À MODIFIER - le filtre Label tag 7]">Label tag 7</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6351" aria-label="Retirer [À MODIFIER - le filtre Label tag 8]">Label tag 8</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6352" aria-label="Retirer [À MODIFIER - le filtre Label tag 9]">Label 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-6363" aria-label="Retirer [À MODIFIER - le filtre Label tag 1]">Label tag 1</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6364" aria-label="Retirer [À MODIFIER - le filtre Label tag 2]">Label tag 2</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6365" aria-label="Retirer [À MODIFIER - le filtre Label tag 3]">Label tag 3</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6366" aria-label="Retirer [À MODIFIER - le filtre Label tag 4]">Label tag 4</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6367" aria-label="Retirer [À MODIFIER - le filtre Label tag 5]">Label tag 5</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6368" aria-label="Retirer [À MODIFIER - le filtre Label tag 6]">Label tag 6</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6369" aria-label="Retirer [À MODIFIER - le filtre Label tag 7]">Label tag 7</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6370" aria-label="Retirer [À MODIFIER - le filtre Label tag 8]">Label tag 8</button>
    </li>
    <li>
        <button class="fr-tag fr-tag--dismiss" id="tag-6371" aria-label="Retirer [À MODIFIER - le filtre Label tag 9]">Label tag 9</button>
    </li>
</ul>

Paramètres d’affichage

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