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.

Basic Usage

This section demonstrates the basic functionality of the component, including basic usage, tips with icons, and guidance with action buttons.

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

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

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

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

---
import { EmptyState, Button } 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>