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(false);
  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

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(false); 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

Ant Design

Empty

Ant Design

Empty

When To Use

Examples

API

Built-in images

When To Use

Examples

API

Built-in images

Select

TreeSelect

Cascader

Transfer

Table

List