États vides

État vide de liste / table

Quand une liste ou une table ne contient aucun enregistrement. Toujours inclure une icône, un titre descriptif, une phrase de contexte et un CTA vers l'action principale.

<div class="flex flex-col items-center justify-center py-16 text-center">
  <svg class="w-12 h-12 text-base-content/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
  </svg>
  <h3 class="font-accent font-bold text-base text-mc-navy mb-1">Aucune commande</h3>
  <p class="text-sm text-base-content/50 mb-4 max-w-sm">
    Les commandes apparaîtront ici une fois créées. Commencez par ajouter une nouvelle commande.
  </p>
  <a href="/commandes/new" class="btn btn-primary btn-sm">Créer une commande</a>
</div>

Résultats de recherche vides

Quand une recherche ne retourne aucun résultat. Reprendre le terme recherché dans le titre pour confirmer que la requête a bien été prise en compte.

<div class="flex flex-col items-center justify-center py-16 text-center">
  <svg class="w-12 h-12 text-base-content/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </svg>
  <h3 class="font-accent font-bold text-base text-mc-navy mb-1">Aucun résultat pour "{ query }"</h3>
  <p class="text-sm text-base-content/50 mb-4 max-w-sm">
    Essayez avec d'autres mots-clés ou parcourez le catalogue complet.
  </p>
  <a href="/catalogue" class="btn btn-ghost btn-sm">Voir tout le catalogue</a>
</div>

Résultats filtrés vides

Quand des filtres actifs excluent tous les résultats. Distinguer ce cas de la recherche vide : le CTA doit effacer les filtres, pas proposer une création.

<div class="flex flex-col items-center justify-center py-16 text-center">
  <svg class="w-12 h-12 text-base-content/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
  </svg>
  <h3 class="font-accent font-bold text-base text-mc-navy mb-1">Aucun produit pour ces filtres</h3>
  <p class="text-sm text-base-content/50 mb-4 max-w-sm">
    Essayez d'élargir votre sélection en effaçant certains filtres actifs.
  </p>
  <button class="btn btn-outline btn-primary btn-sm">Effacer les filtres</button>
</div>

État vide dans une card

Quand une section de page (articles d'une commande, contacts d'un client) est encore vide. Le CTA reste dans la card, au niveau de la section concernée.

<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="card-body border-b border-base-200 bg-base-200/60 rounded-t-[var(--radius-box)]">
    <h2 class="card-title text-base">Articles de la commande</h2>
  </div>
  <div class="card-body">
    <div class="flex flex-col items-center py-10 text-center">
      <svg class="w-10 h-10 text-base-content/20 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 16H4L5 9z"/>
      </svg>
      <p class="font-accent font-bold text-sm text-mc-navy mb-1">Aucun article</p>
      <p class="text-xs text-base-content/40 mb-3">Ajoutez des produits à cette commande.</p>
      <button class="btn btn-primary btn-sm">Ajouter un article</button>
    </div>
  </div>
</div>

Règles