Empty - Kumo

No packages found

Get started by installing your first package.

$npm install @cloudflare/kumo

import { Empty, Button } from "@cloudflare/kumo";
import { PackageIcon, CodeIcon, GlobeIcon } from "@phosphor-icons/react";

export function EmptyDemo() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="No packages found"
      description="Get started by installing your first package."
      commandLine="npm install @cloudflare/kumo"
      contents={
        <div className="flex items-center gap-2">
          <Button icon={<CodeIcon />}>See examples</Button>
          <Button icon={<GlobeIcon />} variant="primary">
            View documentation
          </Button>
        </div>
      }
    />
  );
}

安装

import { Empty } from "@cloudflare/kumo";

用法

import { Empty } from "@cloudflare/kumo";
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 @kumo/ui"
    />
  );
}

示例

基本

No results found

Try adjusting your search or filter to find what you're looking for.

import { Empty } from "@cloudflare/kumo";

export function EmptyBasicDemo() {
  return (
    <Empty
      title="No results found"
      description="Try adjusting your search or filter to find what you're looking for."
    />
  );
}

尺寸

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

Small

No data available

There is no data to display.

Base

No data available

There is no data to display.

Large

No data available

There is no data to display.

import { Empty } from "@cloudflare/kumo";
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-kumo-subtle">Small</p>
        <Empty
          size="sm"
          icon={<Database size={32} className="text-kumo-inactive" />}
          title="No data available"
          description="There is no data to display."
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-kumo-subtle">Base</p>
        <Empty
          size="base"
          icon={<Database size={48} className="text-kumo-inactive" />}
          title="No data available"
          description="There is no data to display."
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-kumo-subtle">Large</p>
        <Empty
          size="lg"
          icon={<Database size={64} className="text-kumo-inactive" />}
          title="No data available"
          description="There is no data to display."
        />
      </div>
    </div>
  );
}

带命令行

包含可复制的命令，帮助用户快速上手。

No projects found

Get started by creating your first project using the command below.

$npm create kumo-project

import { Empty } from "@cloudflare/kumo";
import { FolderOpen } from "@phosphor-icons/react";

export function EmptyWithCommandDemo() {
  return (
    <Empty
      icon={<FolderOpen size={48} className="text-kumo-inactive" />}
      title="No projects found"
      description="Get started by creating your first project using the command below."
      commandLine="npm create kumo-project"
    />
  );
}

带操作按钮

使用 contents 属性添加自定义操作按钮。

No connection

Unable to connect to the server. Please check your connection and try again.

import { Empty, Button } from "@cloudflare/kumo";
import { CloudSlash } from "@phosphor-icons/react";

export function EmptyWithActionsDemo() {
  return (
    <Empty
      icon={<CloudSlash size={48} className="text-kumo-inactive" />}
      title="No connection"
      description="Unable to connect to the server. Please check your connection and try again."
      contents={
        <div className="flex gap-2">
          <Button variant="primary">Retry</Button>
          <Button variant="secondary">Go Back</Button>
        </div>
      }
    />
  );
}

极简模式

最少只需标题即可。

Nothing here

import { Empty } from "@cloudflare/kumo";

export function EmptyMinimalDemo() {
  return <Empty title="Nothing here" />;
}

API 参考

Prop	Type	Default	Description
size	`"sm" \| "base" \| "lg"`	`"base"`	Size of the empty state container. - `"sm"` — Compact empty state for smaller containers - `"base"` — Default empty state size - `"lg"` — Large empty state for prominent placement
icon	`ReactNode`	-	Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`).
title*	`string`	-	Primary heading text for the empty state.
description	`string`	-	Secondary description text displayed below the title.
commandLine	`string`	-	Shell command displayed in a copyable code block.
contents	`ReactNode`	-	Additional content (buttons, links) rendered below the description.
className	`string`	-	Additional CSS classes merged via `cn()`.