Badge - Badge

Le composant Badge est disponible en 5 états prédéfinis, ou sinon l’état neutre :

  • success
  • error
  • info
  • warning
  • new.

C’est un élément dont le rôle est purement contextuel : il doit être associé à une information donnée sur la page et ne peut pas être cliquable.

Vue d’ensemble

Code

= dsfr_badge(status: :new)     { "Dossier créé" }
= dsfr_badge(status: :warning) { "Informations manquantes" }
= dsfr_badge(status: :success) { "Dossier mis à jour" }
= dsfr_badge(status: :error)   { "Erreur de traitement" }
= dsfr_badge(status: :info)    { "Nouvelles informations" }
= dsfr_badge { "Pas d'état" }

Résultat

Dossier créé

Informations manquantes

Dossier mis à jour

Erreur de traitement

Nouvelles informations

Pas d’état 

<p class="fr-badge fr-badge--new">
  Dossier créé
</p>
<p class="fr-badge fr-badge--warning">
  Informations manquantes
</p>
<p class="fr-badge fr-badge--success">
  Dossier mis à jour
</p>
<p class="fr-badge fr-badge--error">
  Erreur de traitement
</p>
<p class="fr-badge fr-badge--info">
  Nouvelles informations
</p>
<p class="fr-badge">
  Pas d'état
</p>

Sans icône

L’icône des badges système peut être retirée grâce au paramètre has_icon: false. Ce paramètre n’est disponible qu’avec un status.

Code

= dsfr_badge(status: :success, has_icon: false) { "Dossier mis à jour" }
= dsfr_badge(status: :error, has_icon: false)   { "Erreur de traitement" }

Résultat

Dossier mis à jour

Erreur de traitement 

<p class="fr-badge fr-badge--success fr-badge--no-icon">
  Dossier mis à jour
</p>
<p class="fr-badge fr-badge--error fr-badge--no-icon">
  Erreur de traitement
</p>

Tailles

Les badges sont disponibles dans une taille plus petite grâce au paramètre size: :sm.

Code

= dsfr_badge(status: :new, size: :sm)     { "Petit badge" }
= dsfr_badge(status: :new) { "Badge normal" }

Résultat

Petit badge

Badge normal 

<p class="fr-badge fr-badge--new fr-badge--sm">
  Petit badge
</p>
<p class="fr-badge fr-badge--new">
  Badge normal
</p>

Libellé tronqué

Un libellé trop long peut être tronqué avec une ellipse grâce au paramètre ellipsis: true.

Code

= dsfr_badge(ellipsis: true) { "Libellé très long qui sera tronqué lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus" }

Résultat

Libellé très long qui sera tronqué lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus 

<p class="fr-badge">
  <span class="fr-ellipsis">
    Libellé très long qui sera tronqué lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus
  </span>
</p>

Plus d’informations