Retours & statut

État vide

حالة فارغةEmpty state

Stablesrc/dsm/components/empty-state.tsx
L'état vide remplace une liste, une recherche ou un tableau de bord quand il n'y a rien à afficher. Il explique la situation et propose, quand c'est utile, une action pour en sortir.

Import

import { EmptyState } from "@/dsm/components/empty-state";

Exemples

Par défaut

Aucun résultat de recherche.

LTR

Aucune démarche trouvée

Aucun résultat pour « attestation de résidence ». Vérifiez l'orthographe ou essayez un autre mot-clé.

Tailles

sm dans un panneau étroit, md en pleine page.

LTR

Aucune notification

Aucune notification

Vous serez prévenu ici dès qu'un dossier évolue.

Premier dossier

Aucune démarche en cours, avec action de départ.

LTR

Aucune démarche en cours

Vos demandes de passeport, CNIE, carte grise ou attestations apparaîtront ici.

Usage

Quand l'utiliser

  • Utilisez-le pour une recherche sans résultat, une liste de démarches vide ou un premier usage sans historique.
  • Ajoutez une `action` quand l'utilisateur peut résoudre lui-même la situation (élargir sa recherche, créer une première démarche).

Quand ne pas l'utiliser

  • N'en faites pas un état d'erreur technique : une panne réseau relève d'une `Alert`, pas d'un état vide.
  • N'utilisez pas `size="md"` dans un espace exigu (carte, panneau latéral) : préférez `size="sm"`.

Accessibilité & langues

Accessibilité

  • Le titre reste un texte simple, lisible sans l'icône : l'icône décorative est toujours secondaire au message.
  • Le motif de fond (`pattern`) est purement décoratif et n'affecte jamais la lisibilité du texte au-dessus.

RTL & multilingue

  • La composition est centrée : aucune propriété physique gauche/droite n'entre en jeu.
  • Le motif khatam est symétrique et ne nécessite pas de miroir en RTL.

Propriétés

EmptyState
PropriétéTypeDéfautDescription
icon*ReactNode—Icône affichée dans le cadre en arche.
title*ReactNode—Message principal, une phrase courte.
descriptionReactNode—Précision optionnelle sous le titre.
actionReactNode—Bouton ou lien permettant de sortir de l'état vide.
size"sm" | "md"mdDensité verticale et taille du texte.
patternbooleantrueAffiche un motif khatam très discret en fond.

Composants liés