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

暂无数据

<CfEmpty />

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

还没有项目

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

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

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

还没有项目

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

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

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

没有搜索结果

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

还没有文件

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

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

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

<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" />}
/>

Three sizes

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

size = sm

size = md

size = lg

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

<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

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