Badge

Le composant Badge est disponible à travers 5 états prédéfinis :

  • 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" }

Résultat

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

Plus d’informations