Empty - Semi Design Next

Demos

How to import

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

Basic usage

By setting a placeholder image with image, you can manually import the corresponding illustration from @fibrous/semi-illustrations-solid (the default width and height of the illustration is 200x200), or pass in a custom JSX element. image also accepts an image URL string, or an SVG sprite symbol as { id }.

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.

An empty string image counts as no image, and the title is laid out as if there were none.

功能建设中

当前功能暂未开放，敬请期待。

Code

import { IllustrationConstruction, IllustrationConstructionDark } from '@fibrous/semi-illustrations-solid';
import { Empty } from '@fibrous/semi-ui-solid';

const illustrationStyle = { width: '150px', height: '150px' };

export default function EmptyDemo() {
    return <Empty image={<IllustrationConstruction style={illustrationStyle} />} darkModeImage={<IllustrationConstructionDark style={illustrationStyle} />} title="功能建设中" description="当前功能暂未开放，敬请期待。" />;
}

Custom content

Description content goes in the description prop, and children is the actions area below it.

空状态标题

开始创建你的第一个仪表盘吧！

Code

import { IllustrationNoContent, IllustrationNoContentDark } from '@fibrous/semi-illustrations-solid';
import { Button, Empty } from '@fibrous/semi-ui-solid';

const illustrationStyle = { width: '150px', height: '150px' };

export default function EmptyDemo() {
    return (
        <Empty image={<IllustrationNoContent style={illustrationStyle} />} darkModeImage={<IllustrationNoContentDark style={illustrationStyle} />} title="空状态标题" description="开始创建你的第一个仪表盘吧！">
            <div>
                <Button style={{ padding: '6px 24px', 'margin-right': '12px' }} type="primary">
                    二级按钮
                </Button>
                <Button style={{ padding: '6px 24px' }} theme="solid" type="primary">
                    一级按钮
                </Button>
            </div>
        </Empty>
    );
}

It is not necessary to use pictures.

暂未找到匹配的筛选结果

试试重置筛选条件

Code

import { Empty, Typography } from '@fibrous/semi-ui-solid';

export default function EmptyDemo() {
    return (
        <Empty
            title="暂未找到匹配的筛选结果"
            description={
                <span>
                    <Typography.Text>试试 </Typography.Text>
                    <Typography.Text link>重置筛选条件</Typography.Text>
                </span>
            }
        />
    );
}

Different layout

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

创建成功

这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。

Code

import { IllustrationSuccess, IllustrationSuccessDark } from '@fibrous/semi-illustrations-solid';
import { Button, Empty } from '@fibrous/semi-ui-solid';

const illustrationStyle = { width: '150px', height: '150px' };

export default function EmptyDemo() {
    return (
        <Empty
            title="创建成功"
            image={<IllustrationSuccess style={illustrationStyle} />}
            darkModeImage={<IllustrationSuccessDark style={illustrationStyle} />}
            layout="horizontal"
            description="这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。"
            style={{ width: '800px', margin: '0 auto' }}
        >
            <Button type="primary" theme="solid" style={{ padding: '6px 24px' }}>
                开始操作
            </Button>
        </Empty>
    );
}

Placeholder illustration (under construction)

Currently the following illustrations are supported in @fibrous/semi-illustrations-react (@fibrous/semi-illustrations-vue for Vue).

创建成功

加载失败

没有权限

暂无内容，请添加

页面404

搜索无结果

建设中

神游四方

Code

import {
    IllustrationConstruction,
    IllustrationConstructionDark,
    IllustrationFailure,
    IllustrationFailureDark,
    IllustrationIdle,
    IllustrationIdleDark,
    IllustrationNoAccess,
    IllustrationNoAccessDark,
    IllustrationNoContent,
    IllustrationNoContentDark,
    IllustrationNotFound,
    IllustrationNotFoundDark,
    IllustrationNoResult,
    IllustrationNoResultDark,
    IllustrationSuccess,
    IllustrationSuccessDark,
} from '@fibrous/semi-illustrations-solid';
import { Empty } from '@fibrous/semi-ui-solid';

const emptyStyle = { padding: '30px' };
const illustrationStyle = { width: '150px', height: '150px' };

export default function EmptyDemo() {
    return (
        <div style={{ display: 'flex', 'flex-wrap': 'wrap' }}>
            <Empty image={<IllustrationSuccess style={illustrationStyle} />} darkModeImage={<IllustrationSuccessDark style={illustrationStyle} />} description="创建成功" style={emptyStyle} />
            <Empty image={<IllustrationFailure style={illustrationStyle} />} darkModeImage={<IllustrationFailureDark style={illustrationStyle} />} description="加载失败" style={emptyStyle} />
            <Empty image={<IllustrationNoAccess style={illustrationStyle} />} darkModeImage={<IllustrationNoAccessDark style={illustrationStyle} />} description="没有权限" style={emptyStyle} />
            <Empty image={<IllustrationNoContent style={illustrationStyle} />} darkModeImage={<IllustrationNoContentDark style={illustrationStyle} />} description="暂无内容，请添加" style={emptyStyle} />
            <Empty image={<IllustrationNotFound style={illustrationStyle} />} darkModeImage={<IllustrationNotFoundDark style={illustrationStyle} />} description="页面404" style={emptyStyle} />
            <Empty image={<IllustrationNoResult style={illustrationStyle} />} darkModeImage={<IllustrationNoResultDark style={illustrationStyle} />} description="搜索无结果" style={emptyStyle} />
            <Empty image={<IllustrationConstruction style={illustrationStyle} />} darkModeImage={<IllustrationConstructionDark style={illustrationStyle} />} description="建设中" style={emptyStyle} />
            <Empty image={<IllustrationIdle style={illustrationStyle} />} darkModeImage={<IllustrationIdleDark style={illustrationStyle} />} description="神游四方" style={emptyStyle} />
        </div>
    );
}

API reference

Props

Property	Description	Type	Default
darkModeImage	Placeholder image in dark mode, following the theme-mode attribute of document.body. Takes the same values as image.	`JSX.Element \| SVGNode`	-
description	Description content, shown below the title.	`JSX.Element`	-
image	Placeholder image: a JSX element such as an illustration component, an image URL string, or an in-page SVG sprite symbol as `{ id }`. An empty string counts as no image.	`JSX.Element \| SVGNode`	-
imageStyle	Style of the placeholder image, as a style object with kebab-case keys or a string.	`JSX.CSSProperties \| string`	-
layout	Layout mode: vertical or horizontal.	`'vertical' \| 'horizontal'`	`"vertical"`
title	Title, rendered in the title style. Accepts any JSX content.	`JSX.Element`	-

class, style, ref and native attributes land on the root div element. title, description, image, darkModeImage, imageStyle and layout are component props and do not land on the root element.

Accessibility

ARIA

Empty illustrations are decorative: an SVG illustration has aria-hidden="true", and an img rendered from an image URL has an empty alt
title is styled as a heading but rendered as a div without heading semantics, so it does not disturb the page's heading levels

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

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$spacing-empty_content_vertical-marginTop	24px	垂直布局内容顶部外边距
$spacing-empty_content_horizontal-marginLeft	32px	水平布局内容左侧外边距
$spacing-empty_title-marginTop	16px	标题内容顶部外边距
$spacing-empty_footer-marginTop	24px	操作 footer 顶部外边距
$font-empty_title-fontWeight	600	标题字重
$color-empty_description-text-default	var(--semi-color-text-1)	描述文字颜色

Demos

How to import

Basic usage

Custom content

Different layout

Placeholder illustration (under construction)

API reference

Accessibility

ARIA

Content Guidelines

Design Token

FAQ