Badge

Les badges indiquent un statut, une catégorie ou un compteur. Ils sont toujours accompagnés d’un texte visible ou d’un aria-label pour l’accessibilité.

Importation

@import "@tds-tchad/core/components/badge/badge.css";

Variantes

<span class="tds-badge tds-badge--default">Par défaut</span>
<span class="tds-badge tds-badge--info">Information</span>
<span class="tds-badge tds-badge--success">Approuvé</span>
<span class="tds-badge tds-badge--warning">En attente</span>
<span class="tds-badge tds-badge--danger">Rejeté</span>

Avec point de statut

<span class="tds-badge tds-badge--success">
  <span class="tds-badge__dot" aria-hidden="true"></span>
  En ligne
</span>

<span class="tds-badge tds-badge--danger">
  <span class="tds-badge__dot" aria-hidden="true"></span>
  Hors ligne
</span>

Forme rectangulaire

<!-- Modificateur --square pour les catégories et tags -->
<span class="tds-badge tds-badge--info tds-badge--square">Document</span>
<span class="tds-badge tds-badge--default tds-badge--square">Formulaire</span>

Usage gouvernemental

<!-- Statut d'un dossier -->
<table class="tds-table">
  <tbody>
    <tr>
      <td>Demande de CNI</td>
      <td><span class="tds-badge tds-badge--warning">En cours</span></td>
    </tr>
    <tr>
      <td>Certificat de résidence</td>
      <td><span class="tds-badge tds-badge--success">Prêt</span></td>
    </tr>
    <tr>
      <td>Passeport</td>
      <td><span class="tds-badge tds-badge--danger">Rejeté</span></td>
    </tr>
  </tbody>
</table>