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 and mobile — the same component for React and React Native. Stable: its API only changes in a major version.
Why it is here. Used by Orochia, Orazaka.
When to use
- 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.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { EmptyState } from "@krizaka/ui/empty-state";Examples
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 | Default | Description |
|---|---|---|---|
titlerequired | 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). |
Accessibility
role="status": announced politely when it appears after a search.- The icon is decorative and hidden from assistive technology.
Best practices
- 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.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub