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”.

背景视口

暂无数据

src/App.vue

<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>

<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty />
    </>
  );
}

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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.

背景视口

还没有项目

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

src/App.vue

<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>

<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="No projects yet"
      description="Create your first project to get started with ChuFix."
      />
    </>
  );
}

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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.

背景视口

还没有项目

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

src/App.vue

<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>

<script setup>
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>

import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="No projects yet"
      description="Create your first project to get started with ChuFix."
      action={<CfButton variant="primary" size="sm">+ New project</CfButton>}
      />
    </>
  );
}

import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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).

背景视口

没有搜索结果

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

还没有文件

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

src/App.vue

<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>

<script setup>
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>

import { CfEmpty, CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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" />}
      />
    </>
  );
}

import { CfEmpty, CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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。

src/App.vue

<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">
  <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
  <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
  <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
  <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
  <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
  <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
  <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
  <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
  <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" 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>

<script setup>
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">
  <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
  <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
  <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
  <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
  <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
  <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
  <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
  <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
  <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" 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>

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  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">
    <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
    <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
    <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
    <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
    <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
    <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
    <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
    <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
    <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  `)}`;
  return (
    <>
      <CfEmpty
      title="No releases yet"
      description="Pass image for a product-specific illustration."
      image={image}
      imageAlt=""
      size="lg"
      />
    </>
  );
}

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  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">
    <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
    <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
    <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
    <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
    <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
    <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
    <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
    <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
    <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  `)}`;
  return (
    <>
      <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

src/App.vue

<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>

<script setup>
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>

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty size="sm" />
      <CfEmpty size="md" />
      <CfEmpty size="lg" />
    </>
  );
}

import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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