Retour

Badge (badge)

Le composant badge permet de mettre en avant une information de type “statut” ou “état” sur un élément du site.

Documentation

badge seul

Label badge

<p class="fr-badge">Label badge</p>

Il est conseillé d'ajouter une balise span avec la classe fr-ellipsis à l'interieur du badge pour que celui ci reste sur une seule ligne, avec le texte coupé par des points de suspensions.

badge sur une seule ligne - ellipsis

Label badge très long, coupé par des points de suspensions lorsque le label dépasse la largeur du conteneur 

<p class="fr-badge">
    <span class="fr-ellipsis">Label badge très long, coupé par des points de suspensions lorsque le label dépasse la largeur du conteneur</span>
</p>

badge - succès

Label badge

<p class="fr-badge fr-badge--success fr-badge fr-badge--success">Label badge</p>

badge - succès sans icone

Label badge

<p class="fr-badge fr-badge--success fr-badge--no-icon fr-badge fr-badge--success fr-badge--no-icon">Label badge</p>

badge - erreur

Label badge

<p class="fr-badge fr-badge--error fr-badge fr-badge--error">Label badge</p>

badge - erreur sans icone

Label badge

<p class="fr-badge fr-badge--error fr-badge--no-icon fr-badge fr-badge--error fr-badge--no-icon">Label badge</p>

badge - information

Label badge

<p class="fr-badge fr-badge--info fr-badge fr-badge--info">Label badge</p>

badge - information sans icone

Label badge

<p class="fr-badge fr-badge--info fr-badge--no-icon fr-badge fr-badge--info fr-badge--no-icon">Label badge</p>

badge - avertissement

Label badge

<p class="fr-badge fr-badge--warning fr-badge fr-badge--warning">Label badge</p>

badge - avertissement sans icone

Label badge

<p class="fr-badge fr-badge--warning fr-badge--no-icon fr-badge fr-badge--warning fr-badge--no-icon">Label badge</p>

badge - nouveauté

Label badge

<p class="fr-badge fr-badge--new fr-badge fr-badge--new">Label badge</p>

badge - nouveauté sans icone

Label badge

<p class="fr-badge fr-badge--new fr-badge--no-icon fr-badge fr-badge--new fr-badge--no-icon">Label badge</p>

badge - personnalisé green-menthe

Label badge

<p class="fr-badge fr-badge--green-menthe fr-badge fr-badge--green-menthe">Label badge</p>

badge - personnalisé orange-terre-battue

Label badge

<p class="fr-badge fr-badge--orange-terre-battue fr-badge fr-badge--orange-terre-battue">Label badge</p>

badge - personnalisé purple-glycine

Label badge

<p class="fr-badge fr-badge--purple-glycine fr-badge fr-badge--purple-glycine">Label badge</p>

badge taille SM

Label badge

<p class="fr-badge fr-badge--sm">Label badge</p>

badge SM - succès

Label badge

<p class="fr-badge fr-badge--sm fr-badge--success fr-badge fr-badge--sm fr-badge--success">Label badge</p>

badge SM - erreur

Label badge

<p class="fr-badge fr-badge--sm fr-badge--error fr-badge fr-badge--sm fr-badge--error">Label badge</p>

badge SM - information

Label badge

<p class="fr-badge fr-badge--sm fr-badge--info fr-badge fr-badge--sm fr-badge--info">Label badge</p>

badge SM - avertissement

Label badge

<p class="fr-badge fr-badge--sm fr-badge--warning fr-badge fr-badge--sm fr-badge--warning">Label badge</p>

badge SM - nouveauté

Label badge

<p class="fr-badge fr-badge--sm fr-badge--new fr-badge fr-badge--sm fr-badge--new">Label badge</p>

badge SM - personnalisé purple-glycine

Label badge

<p class="fr-badge fr-badge--sm fr-badge--purple-glycine fr-badge fr-badge--sm fr-badge--purple-glycine">Label badge</p>

Groupe de badges

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

Groupe de badges

  • Label badge 1

  • Label badge 2

  • Label badge 3

  • Label badge 4

  • Label badge 5

  • Label badge 6

  • Label badge 7

  • Label badge 8

  • Label badge 9

<ul class="fr-badges-group">
    <li>
        <p class="fr-badge fr-badge">Label badge 1</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 2</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 3</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 4</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 5</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 6</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 7</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 8</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 9</p>
    </li>
</ul>

Groupe de badges SM

  • Label badge 1

  • Label badge 2

  • Label badge 3

  • Label badge 4

  • Label badge 5

  • Label badge 6

  • Label badge 7

  • Label badge 8

  • Label badge 9

<ul class="fr-badges-group fr-badges-group--sm">
    <li>
        <p class="fr-badge fr-badge">Label badge 1</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 2</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 3</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 4</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 5</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 6</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 7</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 8</p>
    </li>
    <li>
        <p class="fr-badge fr-badge">Label badge 9</p>
    </li>
</ul>

Paramètres d’affichage

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