Component
EmptyState
A named section for an empty successful result. It shows a title with an optional description, decorative icon and caller-supplied action. Compose it inside an existing container.
Xem trước
import { IconLayoutGrid } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import { EmptyState } from "@/components/ui/empty-state"
const createProject = () => { /* Create a project in your application. */ }
<EmptyState title="No projects yet" description="Create a project to keep your work together." icon={<IconLayoutGrid size={20} weight="regular" />} action={<Button onClick={createProject}>Create project</Button>} />Cách dùng
Khi nào dùng
- Explain why a successful view has no content yet and offer its first action.
- Explain that filters returned no matches and offer a way to adjust them.
Khi nào không dùng
- Content is still loading. Use Skeleton or Spinner.
- An operation failed. Use Alert.
- A table has no rows. Use Table with its empty content.
Ví dụ
First use
import { IconInbox } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import { EmptyState } from "@/components/ui/empty-state"
<EmptyState title="No projects yet" description="Create a project to keep your ideas and files together." icon={<IconInbox size={20} />} action={<Button>Create project</Button>} />Filtered results
import { IconSearch } from "@tabler/icons-react"
import { EmptyState } from "@/components/ui/empty-state"
import { Link } from "@/components/ui/link"
<EmptyState title="No matching projects" description="Try another search or clear the filters to see all projects." icon={<IconSearch size={20} />} action={<Link href="#all-projects">View all projects</Link>} />Nên và không nên
Nên
- Explain why there is no content and give a useful next step.
- Use a first-use message before any content exists and a different message when filters hide content.
- Compose inside an existing page section or Card.
Không nên
- Do not use an empty state for loading or errors.
- Do not add a second card border around the component.
- Do not announce static empty sections as live regions.
Props
| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
|---|---|---|---|---|
| title bắt buộc | node | - | - | Short heading naming the empty result. |
| description | node | - | - | Explanation or next step for the empty result. |
| icon | node | - | - | Decorative icon supplied by the caller. |
| action | node | - | - | Caller-supplied action that helps the user proceed. |
Cấu tạo
| Phần | Mô tả |
|---|---|
| root | Centered named section with token spacing and no card border. |
| title | Heading that names the section by default. |
| description | Optional secondary text explaining why the result is empty. |
| icon | Optional decorative icon in the secondary icon color. |
| actions | Caller-supplied action such as Button or Link. |
Khả năng truy cập
Role: region
- The title names the section unless aria-label or aria-labelledby provides a different name.
- No live region is added by default. A caller can set role="status" when results change.
- The icon is decorative. Title and description explain the empty result.
Cài đặt
npx shadcn add https://werewolf-ui.vercel.app/r/empty-state.jsonLệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").