Badge

شارةBadge

Stablesrc/dsm/components/badge.tsx

Le badge affiche un statut, une catégorie ou une métadonnée courte à côté d'un contenu — l'état d'une demande, le coût d'une démarche, une étiquette d'institution. Il n'est jamais interactif et ne doit jamais être le seul moyen de comprendre une information.

Import

import { Badge } from "@/dsm/components/badge";

Exemples

Tons

Les neuf tons disponibles, du statut neutre aux teintes de marque.

LTR

BrouillonEn coursValidéeEn attenteRefuséeUrgentGratuitOfficielArchivée

Tailles

Taille `sm` pour les listes denses, `md` par défaut ailleurs.

LTR

CNIECNIE

Avec puce

Les quatre statuts d'une demande administrative, avec puce de couleur.

LTR

DéposéeEn coursValidéeRefusée

Dans une carte

Un badge de statut intégré à la ligne de titre d'une carte.

LTR

Demande n° 2026-114 892

Renouvellement de la CNIE

Validée

Votre carte est prête. Retirez-la au bureau d'arrondissement de Casablanca-Anfa muni de votre récépissé.

Usage

Quand l'utiliser

Utilisez un badge pour afficher l'état de traitement d'une demande (déposée, en cours, validée, refusée).
Utilisez `dot` lorsqu'un repère visuel supplémentaire doit renforcer la couleur, notamment pour les statuts en évolution.
Utilisez les tons `rouge`/`vert`/`ink`/`outline` pour des étiquettes de marque (nouveau, gratuit, officiel) plutôt que pour un statut de traitement.

Quand ne pas l'utiliser

N'utilisez pas un badge comme bouton : il n'est pas interactif et ne doit déclencher aucune action au clic.
N'accumulez pas plus de deux badges sur un même élément, au risque de surcharger la lecture du titre.

Accessibilité & langues

Accessibilité

La couleur n'est jamais le seul signal : le texte du badge doit toujours nommer explicitement le statut (« Refusée », pas seulement un badge rouge).
Le badge est un simple `<span>` : s'il reflète un changement d'état en direct, placez-le dans un conteneur `role="status"`.

RTL & multilingue

Le point de statut (`dot`) et le texte s'inversent automatiquement grâce à `inline-flex`/`gap` : aucune classe spécifique au sens de lecture n'est nécessaire.

Propriétés