Empty

Empty state placeholder.

When To Use

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

Examples

Simplest Usage.

TypeScript
JavaScript
import React from 'react';
import { Empty } from 'antd';

const App: React.FC = () => <Empty />;

export default App;

Chose image

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

TypeScript
JavaScript
import React from 'react';
import { Empty } from 'antd';

const App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

export default App;

Customize

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

TypeScript
JavaScript
import React from 'react';
import { Button, Empty } from 'antd';

const App: React.FC = () => (
  <Empty
    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
    imageStyle={{ height: 60 }}
    description={
      <span>
        Customize <a href="#API">Description</a>
      </span>
    }
  >
    <Button type="primary">Create Now</Button>
  </Empty>
);

export default App;

ConfigProvider

Use ConfigProvider set global Empty style.

TypeScript
JavaScript
import React, { useState } from 'react';
import { SmileOutlined } from '@ant-design/icons';
import {
  Cascader,
  ConfigProvider,
  Divider,
  List,
  Select,
  Space,
  Switch,
  Table,
  Transfer,
  TreeSelect,
} from 'antd';

const customizeRenderEmpty = () => (
  <div style={{ textAlign: 'center' }}>
    <SmileOutlined style={{ fontSize: 20 }} />
    <p>Data Not Found</p>
  </div>
);

const style: React.CSSProperties = { width: 200 };

const App: React.FC = () => {
  const [customize, setCustomize] = useState(true);
  return (
    <>
      <Switch
        unCheckedChildren="default"
        checkedChildren="customize"
        checked={customize}
        onChange={setCustomize}
      />
      <Divider />
      <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <h4>Select</h4>
          <Select style={style} />
          <h4>TreeSelect</h4>
          <TreeSelect style={style} treeData={[]} />
          <h4>Cascader</h4>
          <Cascader style={style} options={[]} showSearch />
          <h4>Transfer</h4>
          <Transfer />
          <h4>Table</h4>
          <Table
            style={{ marginTop: 8 }}
            columns={[
              { title: 'Name', dataIndex: 'name', key: 'name' },
              { title: 'Age', dataIndex: 'age', key: 'age' },
            ]}
          />
          <h4>List</h4>
          <List />
        </Space>
      </ConfigProvider>
    </>
  );
};

export default App;

No description

Simplest Usage with no description.

TypeScript
JavaScript
import React from 'react';
import { Empty } from 'antd';

const App: React.FC = () => <Empty description={false} />;

export default App;

API

<Empty>
  <Button>Create</Button>
</Empty>

Property	Description	Type	Default
description	Customize description	ReactNode	-
image	Customize image. Will treat as image url when string provided	ReactNode	`Empty.PRESENTED_IMAGE_DEFAULT`
imageStyle	The style of image	CSSProperties	-

Built-in images

Empty.PRESENTED_IMAGE_SIMPLE
Empty.PRESENTED_IMAGE_DEFAULT

Design Token

Global Token

Token Name	Description	Type	Default Value
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0, 0, 0, 0.88)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0, 0, 0, 0.25)
controlHeightLG	LG component height	number	40
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
lineHeight	Line height of text.	number	1.5714285714285714
margin	Control the margin of an element, with a medium size.	number	16
marginXL	Control the margin of an element, with an extra-large size.	number	32
marginXS	Control the margin of an element, with a small size.	number	8
opacityImage		number	1

import React from 'react'; import { Button, Empty } from 'antd'; const App: React.FC = () => ( <Empty image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" imageStyle={{ height: 60 }} description={ <span> Customize <a href="#API">Description</a> </span> } > <Button type="primary">Create Now</Button> </Empty> ); export default App;

import React, { useState } from 'react'; import { SmileOutlined } from '@ant-design/icons'; import { Cascader, ConfigProvider, Divider, List, Select, Space, Switch, Table, Transfer, TreeSelect, } from 'antd'; const customizeRenderEmpty = () => ( <div style={{ textAlign: 'center' }}> <SmileOutlined style={{ fontSize: 20 }} /> <p>Data Not Found</p> </div> ); const style: React.CSSProperties = { width: 200 }; const App: React.FC = () => { const [customize, setCustomize] = useState(true); return ( <> <Switch unCheckedChildren="default" checkedChildren="customize" checked={customize} onChange={setCustomize} /> <Divider /> <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}> <Space direction="vertical" style={{ width: '100%' }}> <h4>Select</h4> <Select style={style} /> <h4>TreeSelect</h4> <TreeSelect style={style} treeData={[]} /> <h4>Cascader</h4> <Cascader style={style} options={[]} showSearch /> <h4>Transfer</h4> <Transfer /> <h4>Table</h4> <Table style={{ marginTop: 8 }} columns={[ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, ]} /> <h4>List</h4> <List /> </Space> </ConfigProvider> </> ); }; export default App;

Property

Description

Type

Default

Version

description

Customize description

ReactNode

image

Customize image. Will treat as image url when string provided

ReactNode

Empty.PRESENTED_IMAGE_DEFAULT

imageStyle

The style of image

CSSProperties

Token Name

Description

Type

Default Value

colorText

Default text color which comply with W3C standards, and this color is also the darkest neutral color.

string

rgba(0, 0, 0, 0.88)

colorTextDisabled

Control the color of text in disabled state.

string

rgba(0, 0, 0, 0.25)

controlHeightLG

LG component height

number

fontSize

The most widely used font size in the design system, from which the text gradient will be derived.

number

lineHeight

Line height of text.

number

1.5714285714285714

margin

Control the margin of an element, with a medium size.

number

marginXL

Control the margin of an element, with an extra-large size.

number

marginXS

Control the margin of an element, with a small size.

number

opacityImage

number

Ant Design

Empty

Ant Design

Empty

When To Use

Examples

API

Built-in images

Design Token

Global Token

When To Use

Examples

API

Built-in images

Design Token

Global Token

Select

TreeSelect

Cascader

Transfer

Table

List