Empty State 空状态
解释列表或页面为何暂无内容，并给出明确的下一步行动。
使用概览
适合使用
- 首次使用、筛选无结果或数据被清空时需要提供方向。
不建议使用
- 数据仍在加载，或错误状态需要单独说明恢复方式时。
真实示例
首次使用空状态
解释没有项目的原因并提供创建入口。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/empty-state.json基础用法
导入
import { EmptyState, EmptyStateTitle, EmptyStateDescription, EmptyStateAction } from "@richardqiu/quartz/empty-state";JSX
<EmptyState><EmptyStateTitle>还没有项目</EmptyStateTitle><EmptyStateDescription>创建第一个项目以开始协作。</EmptyStateDescription><EmptyStateAction>创建项目</EmptyStateAction></EmptyState>状态与控制摘要
默认
空状态
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
children | ReactNode | 必填 | 组合标题、说明、图标与下一步操作区域。 |
组合结构
- 01
EmptyState - 02
EmptyStateIcon - 03
EmptyStateTitle - 04
EmptyStateDescription - 05
EmptyStateAction
键盘约定
- EmptyState 不添加键盘行为，操作区内控件保持原生行为。
可访问性契约
- 由使用方提供本地化标题、说明和操作名称，不使用英文兜底文案。
- 图标为装饰内容，标题使用真实 heading 标记所属区域。