Empty

Empty state placeholder.
Importimport{ Empty }from"antd";

When To Use

  • When there is no data provided, display for friendly tips.
  • User tutorial to create something in fresh new situation.

Examples

No data
No data

Simplest Usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
No data
No data

You can choose another style of image by setting image to Empty.PRESENTED_IMAGE_SIMPLE.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
empty
Customize Description

Customize image source, image size, description and extra content.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Select

TreeSelect

Cascader

Transfer

0 item

Data Not Found

0 item

Data Not Found

Table

NameAge

Data Not Found

List

Data Not Found

Use ConfigProvider set global Empty style.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
No data

Simplest Usage with no description.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

Common props ref:Common props

<Empty>
<Button>Create</Button>
</Empty>
PropertyDescriptionTypeDefaultVersion
descriptionCustomize descriptionReactNode-
imageCustomize image. Will treat as image url when string providedReactNodeEmpty.PRESENTED_IMAGE_DEFAULT
imageStyleThe style of imageCSSProperties-

Built-in images

  • Empty.PRESENTED_IMAGE_SIMPLE

  • Empty.PRESENTED_IMAGE_DEFAULT

Semantic DOM

No data
Customize Description
  • root
    5.23.0
    Root element
  • image
    5.23.0
    Image element
  • description
    5.23.0
    Description element
  • footer
    5.23.0
    Footer element

Design Token

Global TokenHow to use?