logo
English

导航菜单

Documents

EmptyState

Introduction

The EmptyState component provides clear visual feedback when there is no data on a page or in a block, and it can guide users to the next action.

Examples

没有数据

当前没有任何可用数据显示。

任务完成

所有任务都已成功完成。

没有用户

系统中还没有任何用户，您可以立即创建一个。

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState title="没有数据" description="当前没有任何可用数据显示。" />

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState
  title="任务完成"
  description="所有任务都已成功完成。"
  icon="CheckCircle"
/>

---



import { Button, EmptyState } from "@coffic/cosy-ui";
---

<EmptyState
  icon="users"
  title="没有用户"
  description="系统中还没有任何用户，您可以立即创建一个。">
  <Button class="cosy:btn-primary">创建新用户</Button>
  <Button>返回首页</Button>
</EmptyState>

Custom Styles

The EmptyState component itself does not contain complex styles, but it can be easily placed in any container and will inherit the text color of the parent element.

在深色背景下

该组件能很好地适应不同的背景颜色。

---



import { EmptyState } from "@coffic/cosy-ui";
---

<div class="cosy:bg-base-200 cosy:p-8 cosy:rounded-lg">
  <EmptyState
    title="在深色背景下"
    description="该组件能很好地适应不同的背景颜色。"
    class="cosy:text-neutral-content"
  />
</div>

Props

description

Supplementary descriptive text for the empty state, displayed below the title.

没有数据

尝试调整筛选条件或稍后再试。

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState title="没有数据" description="尝试调整筛选条件或稍后再试。" />

icon

The name of the icon displayed above the title, supporting the icons provided by the library.

没有用户

创建你的第一个用户以开始吧。

未找到结果

尝试调整筛选条件或关键字。

暂无权限

请联系管理员为你授予访问权限。

暂无内容

稍后再来查看或创建新内容。

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState
  icon="UsersIcon"
  title="没有用户"
  description="创建你的第一个用户以开始吧。"
/>

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState
  icon="SearchIcon"
  title="未找到结果"
  description="尝试调整筛选条件或关键字。"
/>

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState
  icon="WarningIcon"
  title="暂无权限"
  description="请联系管理员为你授予访问权限。"
/>

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState
  icon="InfoIcon"
  title="暂无内容"
  description="稍后再来查看或创建新内容。"
/>

title

The main title for the empty state, used to clarify the current state and intent.

没有数据

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState title="没有数据" />

Slots

default

Used to place action buttons or guidance content (e.g., “Create”, “Back”).

没有数据

---



import { EmptyState } from "@coffic/cosy-ui";
---

<EmptyState title="没有数据">
  <button
    style="background:#111827;color:#fff;border:none;border-radius:0.375rem;padding:0.5rem 1rem;cursor:pointer;"
    >创建</button
  >
</EmptyState>

搜索