COMPOSANTS

Badges & Tags

Statuts MC (invariants)

Système de statuts unifié pour toutes les apps MC. Un statut se nomme par ce qu'il signifie, jamais par sa couleur : c'est ce qui permet de changer l'apparence d'« en attente » partout d'un seul geste. La liste est close et invariante — mêmes classes pour les mêmes états dans toutes les apps.

Brouillon En attente En cours Validé Terminé Annulé Refusé Étiquette

Aperçu	Classe MC	Concept MC	Quand l'utiliser
Brouillon	badge-draft	Brouillon	Pas encore soumis — en cours de création
En attente	badge-pending	En attente	Soumis, attend une action humaine
En cours	badge-active	En cours	Traitement actif — en production, en livraison
Validé	badge-validated	Validé	Approuvé / confirmé — devis accepté, échantillon validé
Terminé	badge-completed	Terminé	Cycle de vie complété — livré, facturé, archivé
Annulé	badge-cancelled	Annulé	Annulé avant completion — par le client ou en interne
Refusé	badge-refused	Refusé	Rejeté après examen — devis refusé, commande retoquée
Étiquette	badge-neutral	Pas un statut	Une étiquette neutre : un rôle, un fournisseur, un code taille, un compteur

<span class="badge badge-draft">Brouillon</span>    <!-- gris  — pas encore soumis -->
<span class="badge badge-pending">En attente</span> <!-- amber — attend action humaine -->
<span class="badge badge-active">En cours</span>      <!-- bleu  — traitement actif -->
<span class="badge badge-validated">Validé</span>     <!-- vert  — approuvé -->
<span class="badge badge-completed">Terminé</span>    <!-- vert foncé — cycle complet -->
<span class="badge badge-cancelled">Annulé</span>     <!-- rouge — annulé -->
<span class="badge badge-refused">Refusé</span>      <!-- rouge foncé — rejeté -->
<span class="badge badge-neutral">Étiquette</span>   <!-- gris — PAS un statut -->

✓ Toujours utiliser le même badge pour le même statut dans toutes les apps.

✗ Ne jamais créer de nouveaux statuts sans les ajouter à ce design system.

✗ Ne pas utiliser badge-validated pour autre chose que "Validé".

Une seule taille, aucune variante

Le badge n'a ni taille ni déclinaison : badge-sm, badge-lg, badge-xs et badge-outline sont des noms DaisyUI que mc-primitives.css ne définit pas. Posés à côté de .badge, qui n'est pas layeré, ils ne font rien : le badge s'affiche, simplement pas comme demandé.

Validé Étiquette

<span class="badge badge-validated">Validé</span>
<span class="badge badge-neutral">Étiquette</span>   <!-- tag neutre, pas un statut -->

Avec point indicateur

Variante visuelle pour les listes compactes. Le point renforce le signal couleur pour les utilisateurs daltoniens.

Brouillon En attente En cours Validé Terminé Annulé

<span class="badge badge-validated gap-2">
  <span class="w-1.5 h-1.5 rounded-full bg-current"></span>
  Validé
</span>

Tag (supprimable)

Pour étiqueter des commandes, des clients ou des produits. Le bouton × retire le tag sans confirmation (action réversible).

Stanley/Stella Broderie Scout B2B Urgent

<span class="badge badge-draft gap-1 pr-1">
  Stanley/Stella
  <button class="hover:bg-base-content/10 rounded-full p-0.5" aria-label="Retirer Stanley/Stella">
    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>
</span>

Compteur nav

Pastille numérique sur un item de navigation ou un onglet. Utiliser badge-cancelled pour les éléments urgents, badge-draft pour les compteurs neutres.

Commandes 12

En attente 5

Devis 38

<!-- Compteur urgent (rouge) -->
<div class="flex items-center gap-2">
  <span class="text-sm font-accent">Commandes</span>
  <span class="badge badge-cancelled">12</span>
</div>

<!-- Compteur neutre -->
<div class="flex items-center gap-2">
  <span class="text-sm font-accent">Devis</span>
  <span class="badge badge-draft">38</span>
</div>