États vides
Problème
Une liste vide n'est pas une erreur : c'est un état normal qui doit orienter vers l'action suivante (importer un CSV, créer un compte, etc.).
Structure
<div className="flex flex-col items-center justify-center py-16 text-center">
<Inbox size={32} className="text-muted mb-4" aria-hidden="true" />
<h3 className="text-sm font-semibold mb-1">Aucune transaction</h3>
<p className="text-xs text-muted mb-6">
Importez un relevé CSV pour commencer.
</p>
<Link href="/import" className="btn-primary">
Importer un CSV
</Link>
</div>
Règles
- Icône décorative taille 24–32 px, couleur muted (
var(--color-fg-muted)) - Titre court (≤ 4 mots) : décrit l'état, pas l'erreur
- Sous-texte explique pourquoi et/ou ce que l'utilisateur peut faire
- Un seul CTA primaire — si plusieurs actions possibles, garder la plus probable en bouton et les autres en liens texte
À ne pas faire
- Afficher un état vide identique à un état d'erreur (copy et iconographie doivent différer)
- Laisser un placeholder « Loading... » figé quand la donnée est en réalité vide
- CTA vague (« En savoir plus ») — préférer l'action concrète (« Importer un CSV »)