Empty
empty说明当前没有内容，带图标、说明和后续操作
用法
基础用法
内置空箱图标 + 标题 + 描述。
暂无数据
当前列表还没有任何内容
tsx
<Empty title="暂无数据" description="当前列表还没有任何内容" />带操作
children 渲染在描述下方，常放引导按钮。
还没有项目
创建第一个项目开始使用
tsx
<Empty title="还没有项目" description="创建第一个项目开始使用">
<Button size="sm">新建项目</Button>
</Empty>小尺寸
size="sm" 收紧间距与字号，适合卡片内 / 下拉空态。
无结果
试试其他关键词
tsx
<Empty size="sm" title="无结果" description="试试其他关键词" />无图标
icon={null} 隐藏图标区，只留文案。
暂无通知
有新消息时会出现在这里
tsx
<Empty icon={null} title="暂无通知" description="有新消息时会出现在这里" />何时用
列表/表格/搜索结果无数据时用，给用户「为什么空 + 下一步做什么」（通过 children 放操作按钮）。防泄密遮罩用 Watermark；表格自带空态可直接用 Table/ProTable。
列表区四态各用什么
同一块列表区通常要表达四种状态，它们不是同一个组件的四种文案，选错了读屏念出来的语义就是错的：
| 状态 | 用什么 | 说明 |
|---|---|---|
| 加载中 | <Empty loading />，或 Skeleton | 已知列表形状（几行几列）就用 Skeleton 占位，视觉更稳；形状未知或只是一小块区域用 Empty loading。不要用不带 loading 的 Empty 顶加载中：那会被读屏念成「暂无数据」 |
| 空（确实没有数据） | <Empty title="暂无数据">新建…</Empty> | children 放「去创建」这类下一步动作 |
| 筛选/搜索无结果 | <Empty title="没有匹配的结果">清空筛选</Empty> | 与「空」用同一个组件但文案与动作不同：这里该给的是「清空筛选/换关键词」，不是「新建」 |
| 出错 | Result（status="error"）+ 重试 | 出错不是空：它需要说明原因并给重试入口，用 Empty 会把一次失败伪装成「本来就没有数据」 |
导入
ts
import { Empty } from "@hulianui/ui"Props
继承 div 的所有原生属性（title 除外，已重定义为 ReactNode）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| size | "sm" | "md" | "md" | 尺寸 |
| loading | boolean | false | 加载中。图标区换成 spinner（不再是「空」插画），容器打上 aria-busy="true"；「正在加载」由 spinner 自带的 role="status" + 本地化 aria-label 播报。icon={null} 时图标区仍然整个不渲染 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon | ReactNode | 自定义插画/图标。默认内置空箱图标，传 null 则不渲染图标区 |
| title | ReactNode | 主标题 |
| description | ReactNode | 辅助描述 |
| children | ReactNode | 操作区（按钮等），渲染在描述下方 |
禁忌 / 坑
- 别把「整个列表区是否渲染」和 Empty 绑死成
if (!data.length) return <Empty/>——若同区域有需保活的持久子组件（如已挂载的滚动容器、表单），条件 return 会把它们卸载重挂。参见 [[conditional-empty-return-unmounts-persistent-children]]。 - 别在加载中沿用空态文案。
loading只接管图标区，title/description/children照传照渲染 —— 写成<Empty loading={loading} title="暂无数据" />的话，加载中会一边转圈一边写着「暂无数据」。文案要跟着状态走。 - 加载中不要留着「新建 / 重试」这类操作按钮：数据还没到，用户对着它做的决定都是盲的；「新建」属于空态，「重试」属于出错态（用 Result）。
相关
Skeleton · Spinner · Result · Watermark · Table · Book3D · ProTable · PricingTable
Playground
暂无数据
当前列表还没有任何内容
<Empty
title="暂无数据"
description="当前列表还没有任何内容"
size="md"
/>