COMPONENT 47 · Feedback & Status
空状态
Empty State
也叫Blank SlateZero State无数据状态空白页
当区域没有数据时解释原因，并引导用户下一步。
Explains why an area has no content and guides the user toward a useful next step.
ANATOMY & USAGE
结构与使用建议
组成部分
- 标题
- 原因或说明
- 可选主要操作
适合使用
- 列表初次为空、筛选无结果或内容已清空时。
不建议使用
- 系统仍在加载或发生错误但被误称为空时。
键盘与无障碍
- 标题清楚描述状态，操作是标准按钮或链接；插图不能承担必要信息。
DESCRIBE IT TO AI
这样告诉编程助手
实现空状态（Empty State）：当区域没有数据时解释原因，并引导用户下一步。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<section class="demo stack">
<h2>还没有项目</h2>
<p class="muted">创建第一个项目后，它会显示在这里。</p>
<button type="button">新建项目</button>
</section>