Composant · Feedback

EmptyState

Stable

Bloc centré affiché quand une zone n'a pas encore de contenu : il explique pourquoi c'est vide et propose une action principale claire pour avancer. À distinguer d'une erreur : l'état vide est attendu et constructif.

Aucun composant trouvé

Essayez d'ajuster vos filtres ou d'effacer votre recherche.

Aucun déploiement récent

Votre première mise en production apparaîtra ici.

Voir le code (Svelte)

<EmptyState
  title="Aucun composant trouvé"
  message="Essayez d'ajuster vos filtres ou d'effacer votre recherche."
/>
<EmptyState
  title="Aucun déploiement récent"
  message="Votre première mise en production apparaîtra ici."
/>

Quand l'utiliser

Premier lancement : aucune donnée n'a encore été créée.
Résultat de filtre ou de recherche vide, avec un moyen de réinitialiser.
Une liste ou une table sans entrée, pour guider la première action.

Quand ne pas l'utiliser

Pour une erreur de chargement : utilisez Alert ou un message d'erreur dédié.
Pendant un chargement : utilisez LoadingState ou SkeletonText.
Pour un simple champ optionnel non rempli : aucun état vide n'est nécessaire.

Avec action principale

Le snippet action accueille le bouton qui débloque la première étape.

Aucun service configuré

Créez le premier service avant de publier l'espace du tenant.

Sans action

L'action est optionnelle : un état vide peut se limiter à un titre et un message.

Aucun résultat

Aucune entrée ne correspond à ces filtres. Élargissez la recherche.

Avec contenu personnalisé

Le snippet children insère un contenu libre entre le message et l'action.

Tableau de bord vide

Connectez une source de données pour afficher des graphiques.

Voir la documentation des tables

Anatomie

Conteneur (.st-empty-state) : surface centrée, texte centré, padding généreux.
Contenu (.st-empty-state__content) : titre, message optionnel et children.
Titre (.st-empty-state__title) : énonce l'état, obligatoire.
Action (.st-empty-state__action) : zone centrée pour le bouton principal.

Accessibilité

Le titre est rendu dans un <h2> : respectez la hiérarchie de titres de la page.
L'action est un vrai bouton ou lien focusable, atteignable au clavier.
Le message explique la cause et la suite, pas seulement « rien ici ».
N'employez pas de tonalité d'erreur : l'état vide est attendu et neutre.

Lignes directrices

À faire

Proposer une action principale unique et évidente.
Expliquer pourquoi la zone est vide.

À éviter

Multiplier les boutons concurrents.
Confondre état vide et message d'erreur.

API

Prop	Type	Défaut	Description
`title`	`string`	requis	Titre de l'état vide (h2).
`message`	`string`	optionnel	Texte explicatif sous le titre.
`action`	`Snippet`	optionnel	Zone d'action principale.
`children`	`Snippet`	optionnel	Contenu libre entre message et action.
`class`	`string`	optionnel	Classe(s) sur le conteneur.
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur le <section> conteneur.

Tokens utilisés

--st-component-emptyState-background
--st-component-emptyState-border
--st-component-emptyState-radius
--st-component-emptyState-titleText
--st-component-emptyState-messageText