Patterns UX

États vides

Première utilisation (liste vide)

Quand l'utilisateur n'a encore rien créé. Message encourageant + CTA direct.

Aucune commande

Créez votre première commande de production spéciale pour commencer à suivre vos projets.

Recherche sans résultat

Quand un filtre ou une recherche ne retourne rien. Afficher la query, proposer de la réinitialiser.

Aucun résultat pour "scouts"

Aucune commande ne correspond à votre recherche. Vérifiez l'orthographe ou modifiez vos filtres.

Erreur de chargement

API indisponible, timeout, erreur réseau. Toujours proposer une action de retry.

Impossible de charger les commandes

Une erreur est survenue lors de la connexion au serveur. Vérifiez votre connexion et réessayez.

Permission insuffisante

Accès restreint

Vous n'avez pas les droits pour accéder à cette section. Contactez l'administrateur.

Structure d'un état vide

<div class="text-center max-w-xs mx-auto py-12">
  <!-- Icône dans cercle coloré selon le contexte -->
  <div class="w-14 h-14 rounded-full bg-mc-green-50 flex items-center justify-center mx-auto mb-4">
    <svg class="h-7 w-7 text-mc-green">...</svg>
  </div>

  <!-- Titre : description de l'état, pas "Vide" ou "Rien" -->
  <h3 class="font-accent font-bold text-mc-navy text-lg mb-1">Aucune commande</h3>

  <!-- Corps : contexte et suggestion d'action -->
  <p class="text-sm text-gray-500 mb-4">...</p>

  <!-- CTA optionnel : uniquement si une action directe est possible -->
  <button class="btn btn-primary">Créer une commande</button>
</div>