Empty

Empty tells the reader that a list, table or panel has nothing to show yet: a quiet icon, a line of text and, when there is something to do about it, an action.

#Demos

#Basic

With no props it shows the inbox icon and the locale’s “No data”.

#Size

size scales the icon and the text together, from tiny for a dropdown to huge for a whole page.

#Custom icon and description

icon replaces the inbox with any node; an SVG fills the icon box and takes its color. description takes any node too, links included.

#Title and action

title adds a heading above the description, and extra holds what the reader can do next.

#Without icon or description

showIcon and showDescription hide either part, for tight spaces or when the surrounding text already says it.

#In a Slock window

Slock’s conversation pane before a channel is picked: a # icon, a title and a hint. Pick a channel to see the empty state of a channel with no messages, with an action to start it.

#Props

Empty also accepts native div attributes and a ref. ConfigProvider’s componentOptions.Empty can set a default size and description, and the locale’s Empty.description changes the built-in text.