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.
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@beta @krizaka/tailwind@beta @krizaka/tokens@beta 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.
import { EmptyState } from "@krizaka/ui/empty-state";
const ICON = (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="3" y="5" width="18" height="14" rx="2" />
<path d="m10 9 5 3-5 3z" />
</svg>
);
export default function EmptyStateDefault() {
return <EmptyState icon={ICON} title="No videos yet" description="The videos you publish appear here." />;
}With an action
What to do next.
No videos yet
The videos you publish appear here.
import { Button } from "@krizaka/ui/button";
import { EmptyState } from "@krizaka/ui/empty-state";
const ICON = (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="3" y="5" width="18" height="14" rx="2" />
<path d="m10 9 5 3-5 3z" />
</svg>
);
// With what to do next.
export default function EmptyStateWithAction() {
return (
<EmptyState
icon={ICON}
title="No videos yet"
description="The videos you publish appear here."
action={
<Button variant="primary" size="sm">
Publish a video
</Button>
}
/>
);
}Title only
A search without result.
No results
import { EmptyState } from "@krizaka/ui/empty-state";
export default function EmptyStateTitleOnly() {
return <EmptyState title="No results" />;
}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 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub