synthetic

Empty

Nothing here yet, and what to do next.

No tasksIcon, message, action

No tasks yet

Add the first task for Harbour rebrand.

No results

Nothing for “signage”

Try another word.

Inbox zero

All caught up

Nothing needs you.

Plain note (icon="none")

No saved articles yet.

In context

Empty column, empty dayA drop zone on the board, a quiet calendar on a phone

Review

Drop a task here

Calendar

Nothing on 24 Oct

Enjoy the quiet.

Props

Prop	Type	Required	Default
`description`	`ReactNode`	No	No data
`className`	`string \| undefined`	No	—
`icon`	`EmptyIcon \| undefined`	No	auto
`illustration`	`EmptyIllustration \| undefined`	No	ghost
`bionic`	`boolean \| undefined`	No	—
`bionicOptions`	`BionicOptions \| undefined`	No	—

Accessibility

The illustration is a real <img> with alt="" (the vector icons are aria-hidden): a screen reader only hears the description and any action button.

data-rebar-* attributes

data-rebar-component="empty", data-rebar-part="icon" | "description" | "action".

Migrating to Ant Design

AntD's Empty has description and an action child too, but its image presets (Empty.PRESENTED_IMAGE_SIMPLE) do not map to icon/illustration here. Not codemod-covered.

Neutral dark-mode glyph

With icon="auto" the raster illustration shows in light mode, and in dark mode ([data-theme="dark"] or a dark ThemeScope) a neutral, theme-tinted line glyph takes its place: a ghost for the default illustration, an empty tray for bowl-and-spoon. It is never the error-style circle-with-an-X (that stays available as icon="vector").