Empty
emptyExplains an empty result with an icon, title, description, and optional action.
Usage
Basic usage
Built-in empty box icon + title + description.
No data yet
There is currently no content in the list
tsx
<Empty title="No data yet" description="There is no content in the current list" />With operation
children Rendered below the description, where the guide button is always placed.
No projects yet
Create your first project to get started
tsx
<Empty title="No project yet" description="Create your first project to get started">
<Button size="sm">New project</Button>
</Empty>Small size
size="sm" Tighten the spacing and font size, suitable for in-card/drop-down empty states.
No results
Try other keywords
tsx
<Empty size="sm" title="No results" description="Try other keywords" />No icon
icon={null} Hides the icon area, leaving only the copy.
No notification yet
New news will appear here when it is available
tsx
<Empty icon={null} title="No notification yet" description="New messages will appear here" />When to use
Use Empty after a list, table, or search has finished loading with no content, explaining why and what to do next. Use Skeleton while loading, Watermark for sensitive-content overlays, or built-in empty states in Table and ProTable.
Import
ts
import { Empty } from "@hulianui/ui"Props
Inherits all native div attributes except title, which is redefined as ReactNode.
| Name | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | Component size. |
Slots
| Slot | Type | Description |
|---|---|---|
| icon | ReactNode | Custom illustration; defaults to an empty box, while null removes the icon area. |
| title | ReactNode | Primary heading. |
| description | ReactNode | Supporting explanation. |
| children | ReactNode | Actions rendered below the description. |
Pitfalls
- Avoid replacing an entire persistent region with
if (!data.length) return <Empty />; that unmounts scroll containers, forms, and other stateful children. See [[conditional-empty-return-unmounts-persistent-children]].
Related
Skeleton · Watermark · Table · Book3D · ProTable · PricingTable
Playground
No data yet
There is currently no content in the list
<Empty
title="No data yet"
description="There is currently no content in the list"
size="md"
/>