Empty 空状态
@lark-ui/core

Empty 空状态

在没有内容或数据可展示时使用的组件，支持可选的命令行和操作按钮。

未找到任何包

安装你的第一个包，立即开始使用。

$npm install @lark-ui/core
import { Empty, Button } from "@lark-ui/core";
import { PackageIcon, CodeIcon, GlobeIcon } from "@phosphor-icons/react";

export function EmptyDemo() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="未找到任何包"
      description="安装你的第一个包，立即开始使用。"
      commandLine="npm install @lark-ui/core"
      contents={
        <div className="flex items-center gap-2">
          <Button icon={<CodeIcon />}>查看示例</Button>
          <Button icon={<GlobeIcon />} variant="primary">
            查看文档
          </Button>
        </div>
      }
    />
  );
}

安装

import { Empty } from "@lark-ui/core";

用法

import { Empty } from "@lark-ui/core";
import { PackageIcon } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="No packages found"
      description="Get started by installing your first package."
      commandLine="npm install @lark/ui"
    />
  );
}

示例

基础用法

未找到结果

试试调整搜索或筛选条件，以找到你想要的内容。

import { Empty } from "@lark-ui/core";

export function EmptyBasicDemo() {
  return (
    <Empty
      title="未找到结果"
      description="试试调整搜索或筛选条件，以找到你想要的内容。"
    />
  );
}

尺寸

空状态提供三种尺寸，以适配不同的容器场景。

小

暂无数据

没有可显示的数据。

基础

暂无数据

没有可显示的数据。

大

暂无数据

没有可显示的数据。

import { Empty } from "@lark-ui/core";
import { Database } from "@phosphor-icons/react";

export function EmptySizesDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div>
        <p className="mb-2 text-sm text-lark-subtle">小</p>
        <Empty
          size="sm"
          icon={<Database size={32} className="text-lark-inactive" />}
          title="暂无数据"
          description="没有可显示的数据。"
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-lark-subtle">基础</p>
        <Empty
          size="base"
          icon={<Database size={48} className="text-lark-inactive" />}
          title="暂无数据"
          description="没有可显示的数据。"
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-lark-subtle">大</p>
        <Empty
          size="lg"
          icon={<Database size={64} className="text-lark-inactive" />}
          title="暂无数据"
          description="没有可显示的数据。"
        />
      </div>
    </div>
  );
}

搭配命令行

加入一条可复制的命令，帮助用户快速上手。

未找到任何项目

使用下面的命令创建你的第一个项目，立即开始使用。

$npm create lark-project
import { Empty } from "@lark-ui/core";
import { FolderOpen } from "@phosphor-icons/react";

export function EmptyWithCommandDemo() {
  return (
    <Empty
      icon={<FolderOpen size={48} className="text-lark-inactive" />}
      title="未找到任何项目"
      description="使用下面的命令创建你的第一个项目，立即开始使用。"
      commandLine="npm create lark-project"
    />
  );
}

搭配操作按钮

通过 contents 属性添加自定义操作按钮。

无法连接

无法连接到服务器，请检查你的网络连接后重试。

import { Empty, Button } from "@lark-ui/core";
import { CloudSlash } from "@phosphor-icons/react";

export function EmptyWithActionsDemo() {
  return (
    <Empty
      icon={<CloudSlash size={48} className="text-lark-inactive" />}
      title="无法连接"
      description="无法连接到服务器，请检查你的网络连接后重试。"
      contents={
        <div className="flex gap-2">
          <Button variant="primary">重试</Button>
          <Button variant="secondary">返回</Button>
        </div>
      }
    />
  );
}

最简用法

最少只需要提供标题。

暂无内容

import { Empty } from "@lark-ui/core";

export function EmptyMinimalDemo() {
  return <Empty title="暂无内容" />;
}

API 参考

属性类型默认值说明
size"sm" | "base" | "lg""base"空状态容器的尺寸。 - `"sm"` — 适合较小容器的紧凑空状态 - `"base"` — 默认空状态尺寸 - `"lg"` — 适合突出展示的大型空状态
iconReactNode-显示在标题上方的装饰性图标（例如来自 `@phosphor-icons/react`）。
title*string-空状态的主标题文字。
descriptionstring-显示在标题下方的次要描述文字。
commandLinestring-显示在可复制代码块中的 Shell 命令。
contentsReactNode-显示在描述下方的额外内容（按钮、链接）。
classNamestring-通过 `cn()` 合并的额外 CSS 类名。