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

Basic · basic
Choose image · simple
Customize · customize
ConfigProvider · config-provider
Custom semantic dom styling · style-class
No description · description

API

Common props ref：Common props

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

Property	Description	Type	Default	Global Config
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	5.23.0
description	Customize description	ReactNode	-	×
image	Customize image. Will treat as image url when string provided	ReactNode	`Empty.PRESENTED_IMAGE_DEFAULT`	5.27.0
~~imageStyle~~	The style of image, please use `styles.image` instead	CSSProperties	-	×
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	5.23.0

Built-in images

Empty.PRESENTED_IMAGE_SIMPLE
<div class="site-empty-buildIn-img site-empty-buildIn-simple"><div>
Empty.PRESENTED_IMAGE_DEFAULT
<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>

Semantic DOM

Semantic node	Native description	Version
`root`	Root element, sets text alignment, font and line height styles	5.23.0
`image`	Image element, sets height, opacity, margin and image styles	5.23.0
`description`	Description element, sets text color styles	5.23.0
`footer`	Footer element, sets top margin and action button styles	5.23.0

Semantic description source: vendor/components/empty/demo/_semantic.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Native ComponentToken declares no directly extractable own fields. Shared tokens and inheritance are defined by the declarations below.

Declaration source: vendor/components/empty/style/index.ts

import type { CSSObject } from '@ant-design/cssinjs';

import type { FullToken, GenerateStyle } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

/** Component only token. Which will handle additional calculation of alias token */
// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
export interface ComponentToken {}

/**
 * @desc Empty 组件的 Token
 * @descEN Token for Empty component
 */
interface EmptyToken extends FullToken<'Empty'> {
  /**
   * @desc 空状态图片类名
   * @descEN Class name for empty state image
   */
  emptyImgCls: string;
  /**
   * @desc 空状态图片高度
   * @descEN Height of empty state image
   */
  emptyImgHeight: number | string;
  /**
   * @desc 小号空状态图片高度
   * @descEN Height of small empty state image
   */
  emptyImgHeightSM: number | string;
  /**
   * @desc 中号空状态图片高度
   * @descEN Height of medium empty state image
   */
  emptyImgHeightMD: number | string;
}

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Property	Description	Type	Default
style	The additional style	CSSProperties	-
className	The additional css class	string	-
rootClassName	ClassName on the root element	string	-
autoFocus	Auto focus when component mounted, only effective for focusable elements like forms, links, etc.	boolean	false

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

vendor/components/empty/index.tsx
vendor/components/empty/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.