semi-design/content/show/empty/index-en-US.md

---

localeCode: en-US order: 55 category: Show title: Empty subTitle: Empty icon: doc-empty dir: column

brief: Placeholder component when the page is empty.

Demos

How to import

import { Empty } from '@douyinfe/semi-ui';

Basic usage

By setting a placeholder image with image, you can manually import the corresponding illustration from @douyinfe/semi-illustrations (the default width and height of the illustration is 200x200), or you can import a custom illustration.

After v>=1.13.0, a series of dark mode illustrations are added, and the illustrations that need to be used in dark mode can be passed in through darkModeImage to better adapt to the dark mode.

import React from 'react';
import { Empty } from '@douyinfe/semi-ui';
import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';

() => (
    <Empty
        image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
        darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
        title={'Function under construction'}
        description="The current function is not yet open, so stay tuned."
    />
);

Custom content

Custom description content can be achieved through children.

import React from 'react';
import { Empty, Button } from '@douyinfe/semi-ui';
import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';

() => (
    <Empty
        image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
        darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
        title="Empty status header"
        description="Start creating your first dashboard!"
    >
        <div>
            <Button style={{ padding: '6px 24px', marginRight: 12 }} type="primary">
                Secondary button
            </Button>
            <Button style={{ padding: '6px 24px' }} theme="solid" type="primary">
                Level 1 button
            </Button>
        </div>
    </Empty>
);

It is not necessary to use pictures.

import React from 'react';
import { Empty, Typography } from '@douyinfe/semi-ui';

() => (
    <Empty
        title="No matching filter results found yet"
        description={
            <span>
                <Typography.Text>Try</Typography.Text>
                <Typography.Text link>Reset filter</Typography.Text>
            </span>
        }
    />
);

Different layout

Two types of layouts are supported: vertical, horizontal. The default is vertical.

import React from 'react';
import { Empty, Button } from '@douyinfe/semi-ui';
import { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations';

() => (
    <Empty
        title={'Created successfully'}
        image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}
        darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}
        layout="horizontal"
        description="This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long."
        style={{ width: 800, margin: '0 auto' }}
    >
        <Button type="primary" theme="solid" style={{ padding: '6px 24px' }}>
            Start operation
        </Button>
    </Empty>
);

Placeholder illustration (under construction)

Currently the following illustrations are supported in @douyinfe/semi-illustrations.

As the illustration library is still under construction, please keep an eye on possible changes in the future.

import React from 'react';
import { Empty } from '@douyinfe/semi-ui';
import { IllustrationConstruction, IllustrationSuccess, IllustrationFailure, IllustrationNoAccess, IllustrationNoContent, IllustrationNotFound, IllustrationNoResult } from '@douyinfe/semi-illustrations';

/* The following is available after version 1.13.0 */
import { IllustrationIdle, IllustrationIdleDark, IllustrationConstructionDark, IllustrationSuccessDark, IllustrationFailureDark, IllustrationNoAccessDark, IllustrationNoContentDark, IllustrationNotFoundDark, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';

() => {
    const emptyStyle = {
        padding: 30,
    };
    return (
        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
            <Empty
                image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}
                description={'Created successfully'}
                style={emptyStyle}
            />
            <Empty
                image={<IllustrationFailure style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationFailureDark style={{ width: 150, height: 150 }} />}
                description={'Failed to load'}
                style={emptyStyle}
            />
            <Empty
                image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />}
                description={'Permission denied'}
                style={emptyStyle}
            />
            <Empty
                image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
                description={'No content, please add'}
                style={emptyStyle}
            />
            <Empty
                image={<IllustrationNotFound style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationNotFoundDark style={{ width: 150, height: 150 }} />}
                description={'Page 404'}
                style={emptyStyle} />
            <Empty
                image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
                description={'No search results'}
                style={emptyStyle} />
            <Empty
                image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
                description={'under construction'}
                style={emptyStyle} />
            <Empty
                image={<IllustrationIdle style={{ width: 150, height: 150 }} />}
                darkModeImage={<IllustrationIdleDark style={{ width: 150, height: 150 }} />}
                description={'Wandering Quartet'}
                style={emptyStyle} />
        </div>
    );
};

API reference

Property	Description	Type	Default
className	class name	string	-
darkModeImage	The placeholder image after the dark mode is turned on, in response to the change of the theme-mode property of document.body v>=1.13.0	ReactNode	-
description	Content description	ReactNode	-
image	Placeholder image	ReactNode | { id?: string; viewBox?: string; url?: string;}	-
imageStyle	Placeholder image style	CSSProperties	-
layout	Layout mode, support vertical, horizontal	string	vertical
style	Style name	CSSProperties	-
title	Title v>=1.0.0	ReactNode	-

Accessibility

ARIA

• aria-hidden for Empty illustrations is true

Content Guidelines

• Title
  • The title should be concise and easy to understand
• Text
  • The specific reasons for displaying the empty state can be displayed, and the subsequent operation behavior can also be displayed to help the user eliminate the empty state
  • Don't repeat the content on the title
  • Try to keep the body text within 1-2 sentences
• Action button
  • Button copy needs to be clear and easy to understand
  • Use the verb + noun format

Design Token

FAQ