Empty
emptyExplains an empty result with an icon, title, description, and optional action.
Usage
Basic usage
Built-in empty box icon + title + description.
<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.
<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.
<Empty size="sm" title="No results" description="Try other keywords" />No icon
icon={null} Hides the icon area, leaving only the copy.
<Empty icon={null} title="No notification yet" description="New messages will appear here" />When to use
Use Empty when a list, table, or search result has no content, explaining why and what to do next. Use Watermark for sensitive-content overlays, or the built-in empty states in Table and ProTable.
Which component each list state needs
A list region normally has to express four states. They are not four wordings of one component, and picking the wrong one makes screen readers announce the wrong thing:
| State | Use | Notes |
|---|---|---|
| Loading | <Empty loading />, or Skeleton | Use Skeleton when the shape of the list is known (rows and columns); it keeps the layout steadier. Use Empty loading when the shape is unknown or the region is small. Do not use Empty without loading as a loading placeholder: screen readers announce it as "no data". |
| Empty (there really is no data) | <Empty title="No projects yet">Create…</Empty> | Put the next action, such as "create one", in children. |
| No results after filtering or searching | <Empty title="No matching results">Clear filters</Empty> | Same component as the empty state, different copy and action: offer "clear filters" or "try another keyword", not "create". |
| Error | Result with status="error" plus a retry action | An error is not an empty state. It has to explain what went wrong and offer a retry; Empty would disguise a failure as "there was never any data". |
Import
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. |
| loading | boolean | false | Loading mode. The icon area becomes a spinner instead of the empty illustration and the container gets aria-busy="true"; the spinner carries its own role="status" and localized aria-label. With icon={null} the icon area stays hidden. |
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]]. - Do not reuse empty-state copy while loading.
loadingonly takes over the icon area;title,description, andchildrenkeep rendering, so<Empty loading={loading} title="No data" />spins next to the words "No data". Let the copy follow the state. - Do not leave a "create" or "retry" button visible while loading: the data has not arrived, so any decision made against it is blind. "Create" belongs to the empty state and "retry" belongs to the error state (Result).
Related
Skeleton · Spinner · Result · Watermark · Table · Book3D · ProTable · PricingTable
Playground
<Empty
title="No data yet"
description="There is currently no content in the list"
size="md"
/>