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 
<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>
<div class="fr-badge">
  Pas d'état
</div>

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 
<div class="fr-badge fr-badge--new fr-badge--sm">
  Petit badge
</div>
<div class="fr-badge fr-badge--new">
  Badge normal
</div>

Plus d’informations