Empty state
What a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.
Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orochia, Orazaka.
Quand l’utiliser
- When a list is empty for the first time: say what will appear here and how to start.
- When a search or a filter returns nothing: say so, and how to widen it.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { EmptyState } from "@krizaka/ui/empty-state";Exemples
Default
An icon, a title and a line.
No videos yet
The videos you publish appear here.
With an action
What to do next.
No videos yet
The videos you publish appear here.
Title only
A search without result.
No results
An empty page
A page with nothing in it yet: the bird, what will fill it, the first action.
Library
Nothing here yet
Your videos, once published, wait here with their sales. The first one takes about ten minutes.
Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
titlerequis | ReactNode | — | What is empty, in a few words ("No videos yet"). |
action | ReactNode | — | What to do next: a Button, a link. |
description | ReactNode | — | Why, or what will fill it. |
icon | ReactNode | — | A decorative icon (hidden from assistive technology). |
Accessibilité
role="status": announced politely when it appears after a search.- The icon is decorative and hidden from assistive technology.
Bonnes pratiques
- Title: what is empty, in a few words (“No videos yet”); description: why, or what will fill it.
- One action at most, the one that fills the list.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub