Show · Empty
Placeholder component when the page is empty.


How to import

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.

Custom content

Custom description content can be achieved through children.
It is not necessary to use pictures.

Different layout

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

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.

API reference

classNameclass namestring-
darkModeImageThe 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.0ReactNode-
descriptionContent descriptionReactNode-
imagePlaceholder imageReactNode | { id?: string; viewBox?: string; url?: string;}-
imageStylePlaceholder image styleCSSProperties-
layoutLayout mode, support vertical, horizontalstringvertical
styleStyle nameCSSProperties-
titleTitle v>=1.0.0ReactNode-



  • 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