EmptyState
À quoi il sert
EmptyState indique qu’une liste ou un résultat est vide, et propose une action facultative.
Quand l’utiliser
- Une liste, un résultat de recherche ou un tableau de bord n’a aucune donnée à montrer.
- Une action permet de sortir de l’état vide : créer un élément, modifier les filtres.
Quand ne pas l’utiliser
- Pour un message d’erreur : utiliser Alert, qui porte un ton et un rôle d’annonce.
- Pour un chargement en cours : utiliser Skeleton, qui occupe la place du contenu attendu.
Exemples
Aucun projet
Aucun projet n’est publié pour le moment.
<EmptyState title="Aucun projet">
<p>Aucun projet n’est publié pour le moment.</p>
<a slot="action" href="/projets/nouveau">Créer un projet</a>
</EmptyState>
<EmptyState title="Aucun résultat" align="center" headingLevel={3}>
<p>Modifiez les filtres pour élargir la recherche.</p>
</EmptyState>Variantes
Aucun résultat
Modifiez les filtres pour élargir la recherche.
Accessibilité
Clavier
- Le composant est statique : il ne reçoit pas le focus.
- Les liens ou boutons du slot action gardent leur comportement clavier natif.
Lecteur d’écran
- La section est annoncée comme région, nommée par son titre (aria-labelledby).
- Aucun rôle n’est posé sur le contenu : le titre se lit à son niveau headingLevel.
Garanti par le composant
- Le titre est un élément h2, h3 ou h4 réel, au niveau choisi (WCAG 1.3.1).
- La section a un nom accessible : le texte du titre (WCAG 4.1.2).
- Aucune icône : le sens ne repose ni sur une forme ni sur une couleur (WCAG 1.4.1).
À la charge de l’intégrateur
- Choisir headingLevel selon le plan du document ; le titre doit décrire l’état (WCAG 2.4.6).
- Une action doit mesurer 24 px au minimum de chaque côté (WCAG 2.5.8).
- Deux états vides de même titre sur une page ont le même identifiant : varier le titre.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| title (obligatoire) | string | — | Titre de l'état vide, lu comme nom de la section (par exemple « Aucun résultat »). |
| headingLevel | 2 | 3 | 4 | DEFAULT_HEADING_LEVEL | Niveau du titre dans le plan du document, de 2 à 4. Défaut : 2. |
| align | "start" | "center" | 'start' | Alignement du contenu : `start` (défaut) ou `center`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-fg--pp-color-line--pp-color-muted--pp-color-surface--pp-font-line-height-body--pp-font-line-height-heading--pp-font-size-1--pp-font-weight-semibold--pp-radius-surface--pp-size-measure--pp-size-rule--pp-space-2xs--pp-space-m--pp-space-s--pp-space-xs