COMPOSANTS

Badges & Tags

Statuts MC (invariants)

Système de statuts unifié pour toutes les apps MC. Ces associations DaisyUI / libellé sont invariantes — elles doivent être identiques dans prodspe, l'ERP, les webshops privés et tout futur outil.

Brouillon En attente En cours Validé Terminé Annulé

Aperçu	Classe DaisyUI	Concept MC	Quand l'utiliser
Brouillon	badge-ghost	Brouillon	Pas encore soumis — en cours de création
En attente	badge-warning	En attente	Soumis, attend une action humaine
En cours	badge-info	En cours	Traitement actif — en production, en livraison
Validé	badge-primary	Validé	Approuvé / confirmé — devis accepté, échantillon validé
Terminé	badge-success	Terminé	Cycle de vie complété — livré, facturé, archivé
Annulé	badge-error	Annulé	Annulé avant completion — par le client ou en interne

<span class="badge badge-ghost">Brouillon</span>    <!-- gris  — pas encore soumis -->
<span class="badge badge-warning">En attente</span> <!-- amber — attend action humaine -->
<span class="badge badge-info">En cours</span>      <!-- bleu  — traitement actif -->
<span class="badge badge-primary">Validé</span>     <!-- vert  — approuvé -->
<span class="badge badge-success">Terminé</span>    <!-- vert foncé — cycle complet -->
<span class="badge badge-error">Annulé</span>       <!-- rouge — annulé -->

✓ 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-primary pour autre chose que "Validé".

Tailles

La taille par défaut convient dans presque tous les cas. Utiliser badge-sm dans les tableaux denses et badge-lg dans les héros ou titres de section.

badge-lg Validé

badge (défaut) Validé

badge-sm Validé

badge-xs Validé

<span class="badge badge-primary badge-lg">Validé</span>   <!-- héros, titres -->
<span class="badge badge-primary">Validé</span>           <!-- défaut -->
<span class="badge badge-primary badge-sm">Validé</span>  <!-- tableaux -->
<span class="badge badge-primary badge-xs">Validé</span>  <!-- très compact -->

Variantes outline

Pour les contextes avec fond coloré ou quand le badge plein est trop lourd visuellement.

Validé En attente En cours Terminé Annulé Brouillon

<span class="badge badge-outline badge-primary">Validé</span>
<span class="badge badge-outline badge-warning">En attente</span>
<span class="badge badge-outline badge-error">Annulé</span>

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-primary 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-ghost 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-error pour les éléments urgents, badge-ghost 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-error badge-sm">12</span>
</div>

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