Preview Updated 2026-05-10

Empty

Placeholder for empty lists, tables, or search results. Supports an action button and three sizes.

Basic usage

Without any props, shows the default icon and “No data”.

背景

暂无数据

<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>

<CfEmpty />

Custom text

title is the main message, description is the secondary message. Both are available as a prop or a slot of the same name.

背景

还没有项目

创建你的第一个项目来开始使用础件。

<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>

<CfEmpty
title="No projects yet"
description="Create your first project to get started with ChuFix."
/>

Action button

The action slot (Vue) / action prop (React) is for a navigation or “create” button — give the user a path back from the empty state.

背景

还没有项目

创建你的第一个项目来开始使用础件。

<script setup lang="ts">
import { CfEmpty, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    >
      <template #action>
        <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>

<CfEmpty
title="No projects yet"
description="Create your first project to get started with ChuFix."
action={<CfButton variant="primary" size="sm">+ New project</CfButton>}
/>

Status illustrations

The default icon comes from CfStatusIllustration. You can swap it for search, upload, error, etc. via the icon slot (Vue) / icon prop (React).

背景

没有搜索结果

换个关键词或清空筛选条件试试。

还没有文件

拖拽文件到这里，或点击上传。

<script setup lang="ts">
import { CfEmpty, CfStatusIllustration } from '@chufix-design/vue';
</script>

<template>
  <div class="empty-illustration-demo">
    <CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
      <template #icon>
        <CfStatusIllustration variant="search" />
      </template>
    </CfEmpty>
    <CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
      <template #icon>
        <CfStatusIllustration variant="upload" />
      </template>
    </CfEmpty>
  </div>
</template>

<style scoped>
.empty-illustration-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>

<CfEmpty
title="No matching results"
description="Try a different keyword or clear the filters."
icon={<CfStatusIllustration variant="search" />}
/>

<CfEmpty
title="No files yet"
description="Drop files here, or click to upload."
icon={<CfStatusIllustration variant="upload" />}
/>

Custom image

For full-page empty states, pass image to use a product illustration, generated image, business SVG, or CDN image. For compact icons, keep using the icon slot / prop.

背景

还没有发布记录

可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。

<script setup lang="ts">
import { CfButton, CfEmpty } from '@chufix-design/vue';

const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
  <rect x="26" y="34" width="108" height="82" rx="14" fill="#EEF6FF" stroke="#8BBDF8" stroke-width="4"/>
  <path d="M48 58h64M48 78h42M48 98h56" stroke="#2F7DDD" stroke-width="7" stroke-linecap="round"/>
  <circle cx="118" cy="112" r="22" fill="#EAFBF1" stroke="#20A464" stroke-width="4"/>
  <path d="M108 112l7 7 14-16" stroke="#10824D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`)}`;
</script>

<template>
  <div style="width: 100%; max-width: 34rem;">
    <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。"
      :image="image"
      image-alt=""
      size="lg"
    >
      <template #action>
        <CfButton variant="primary" size="sm">创建发布记录</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>

<CfEmpty
title="No releases yet"
description="Pass image for a product-specific illustration."
image={image}
imageAlt=""
size="lg"
/>

Three sizes

size — sm (inline placeholder), md (default), lg (full-page empty state).

背景

size = sm

size = md

size = lg

<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfEmpty size="sm" title="size = sm" />
    <CfEmpty size="md" title="size = md" />
    <CfEmpty size="lg" title="size = lg" />
  </div>
</template>

<CfEmpty size="sm" />
<CfEmpty size="md" />
<CfEmpty size="lg" />

API

Prop	Type	Default	Description
`title`	`string`	`'No data'`	Main message
`description`	`string`	—	Secondary message
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Overall size
`image`	`string`	—	Custom image URL / data URL
`imageAlt`	`string`	`''`	Image alt text; keep empty for decorative images

Slots / children

icon — replace the default SVG icon
title / description — replace the text nodes (the same-named props also work)
action — action button area

CfStatusIllustration

Prop	Type	Default	Description
`variant`	`'empty' \| 'search' \| 'upload' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'not-found' \| 'forbidden' \| 'server-error'`	`'empty'`	Status illustration type
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Illustration size
`title`	`string`	—	Used as the accessible name when provided; treated as decorative when omitted