EmptyState Component
Anatomie
Quatre emplacements — icon,title,description,actions — tous facultatifs. L'icône est décorative : elle est masquée aux technologies d'assistance, puisqu'elle ne fait que redire le titre.
Aucune facture
Les factures que tu émets apparaîtront ici, la plus récente en tête.
Aucune facture
À droite, le strict minimum. Le titre sort enp et non en titre de section : un état vide est un message de statut, pas une partie du plan du document. Unh2 par défaut polluerait la hiérarchie de toute page portant une liste — titleAs est là pour les cas où l'état vide occupe réellement une région.
Tailles
L'échelle joue sur la respiration verticale et la taille de l'icône, pas sur le texte. Un état vide logé dans un panneau latéral ou une cellule de tableau ne peut pas prendre la place qu'il occuperait en pleine page.
size="sm"
Aucun élément pour l'instant.
size="md"
Aucun élément pour l'instant.
size="lg"
Aucun élément pour l'instant.
Dans un conteneur contraint, sm est le bon réglage — ici au sein d'une Card :
Panier
Panier vide
Recherche sans résultat
Tape quelque chose qui ne correspond à rien — « zzz » par exemple. L'état vide qui apparaît porte ici announce, parce qu'il est la conséquence d'une action : sansrole="status", un lecteur d'écran ne dirait rien du tout et l'utilisateur taperait sans le moindre retour.
- Atelier Kervadec
- Studio Marguerite
- Brasserie du Port
- Librairie Oihana
- Camping Les Pins
- Menuiserie Etchart
Le premier état vide d'une liste qui n'a simplement encore rien — celui de la section « Anatomie » — n'a lui aucun announce : l'annoncer au chargement serait du bruit, pas de l'information.