EmptyState
primitive UI utilisée pour représenter des états vides valides avec des messages clairs et des actions optionnelles.
Expliquer l'absence valideLien vers la section
Les EmptyState Un composant représente un état valide où il n'y a pas de données à afficher.
Utilisez-le quand:
- Une liste n'a pas d'éléments
- Une table n'a pas de résultats
- un tableau de bord n'a pas encore de données
- Les filtres ne renvoient rien
- une fonctionnalité n'a pas été configurée
- un utilisateur n'a pas créé son premier objet
EmptyState explique ce qui s'est passé et peut guider l'utilisateur vers l'action suivante.
C'est une pure UI primitiveIl structure le contenu, pas la logique du produit ou de l’entreprise.
Idée de base
Vide n'est pas un échec. EmptyState explique une absence valide et aide l'utilisateur à avancer.
ImportationLien vers la section
import { EmptyState } from "@pycolors/ui";Utilisation de baseLien vers la section
Utilisez EmptyState lorsque l'application est dans un état valide, mais qu'il n'y a pas encore de contenu.
Pas encore de projets
Créez votre premier projet pour commencer.
Quand utiliser EmptyStateLien vers la section
Utilisez EmptyState lorsque la requête a réussi ou que l'état actuel est valide, mais que le résultat est vide.
États de première série
Résultats filtrés
Surfaces des produits
Avec actionLien vers la section
Utilisez une action quand il y a une prochaine étape claire.
Pas encore de projets
Les projets vous aident à organiser votre travail.
Règle d'action
Une action claire suffit généralement. Les états vides devraient guider les utilisateurs, pas les submerger.
Avec icôneLien vers la section
Utilisez le icon emplacement pour une simple icône décorative ou illustration.
Rien de prévu
Créez un événement pour le voir apparaître ici.
Intérieur d'une carteLien vers la section
EmptyState compose naturellement avec des surfaces telles que Card.
Aucune donnée disponible
Les mesures apparaîtront une fois les données collectées.
État vide de la tableLien vers la section
Utilisez EmptyState à l'intérieur d'une table lorsqu'une requête réussit mais ne renvoie aucune ligne.
Aucun résultatEssayez d'ajuster vos filtres. |
UtilisationsLien vers la section
Confirmez que l'état est valide
Utilisez EmptyState uniquement lorsque la demande a réussi ou que l'absence est attendue.
Expliquer pourquoi il est vide
Le titre doit nommer l'État. La description devrait expliquer ce que cela signifie.
Proposer l'étape suivante quand cela est utile
Ajoutez une action lorsque l'utilisateur peut créer, inviter, réinitialiser des filtres ou configurer quelque chose.
Correspond à la surface environnante
Utilisez EmptyState dans une carte, un tableau ou une section en fonction de la structure de la page.
Gardez la logique du produit à l'extérieur
EmptyState ne décide pas de ce qui se passe ensuite. La page ou la fonctionnalité possède ce comportement.
Skeleton vs AlertLien vers la section
| Situation | Utilisation |
|---|---|
| Les données sont en cours de chargement | Squelette |
| Demande réussie mais il n'y a pas de données | EmptyState |
| La demande a échoué | Alerte |
| L'utilisateur doit confirmer une action | boîte dialogue |
| L'utilisateur a besoin d'un flux de travail latéral | Sheet |
| L'intégration nécessite plusieurs étapes | Interface d'intégration dédiée |
Règle de décision
EmptyState explique l'absence valide. Le squelette représente le chargement. L'alerte communique l'échec.
APILien vers la section
Props
| Prop | Type | Requis | Désignation |
|---|---|---|---|
title | string | Oui | Message principal expliquant l'état vide |
description | string | Non | Contexte supplémentaire pour l'état vide |
action | React.ReactNode | Non | Action facultative |
icon | React.ReactNode | Non | Icône ou illustration décorative en option |
className | string | Non | Autres classes Tailwind |
EmptyState accepte aussi le code HTML standard div props.
React.HTMLAttributes<HTMLDivElement>;TypeScript typesLien vers la section
export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
title: string;
description?: string;
action?: React.ReactNode;
icon?: React.ReactNode;
}AccessibilitéLien vers la section
EmptyState doit être lisible et compréhensible sans se fier aux icônes.
Directives :
- garder le titre clair et descriptif
- garder la signification icon-only en dehors de l'icône
- marquer les icônes décoratives avec
aria-hidden="true" - ne forcez pas la focus lorsqu'un état vide apparaît
- Les actions doivent être accessibles au clavier
- n'utilisez pas EmptyState pour annoncer des erreurs
- use Alerte en cas de défaillances et de problèmes de blocage
Règle d'accessibilité
Les états vides doivent s'expliquer par le texte. Les icônes peuvent soutenir le message, mais elles ne devraient pas porter le seul sens.
Préférez/évitezLien vers la section
Préférez
- Titre clair et courte description
- une action utile lorsque cela est approprié
- copie différente pour les états de première exécution et filtré-vide
- icônes comme décoration de soutien
- placement cohérent à l'intérieur des surfaces de carte ou de table
Éviter
- Utiliser EmptyState pour les erreurs
- Utilisation de EmptyState alors que les données sont encore en cours de chargement
- Des titres comme "Rien ici"
- Multiples actions concurrentes
- logique métier à l'intérieur du composant
Directives de copie du produitLien vers la section
La copie à l'état vide doit répondre à deux questions :
- Pourquoi est-ce vide ?
- Que peut faire l'utilisateur ensuite ?
Pas encore de projets
Use first-run empty states when the user has not created any data yet.