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.

À 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.

Dans un conteneur contraint, sm est le bon réglage — ici au sein d'une Card :

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.

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.

Retry state

A failure and an absence are different sentences. Served as an empty list, a failed read says « there is nothing here » — a statement about the subject, invented out of a network problem. This says what happened instead, and offers the only useful next move.

Without onRetry the button refreshes the page at the same url. A block that fetches for itself passes its own — this one succeeds on the second attempt.

A failure nobody can act on still has to be said, so the button can be taken away.