# Empty

- Page: https://jiguang132.com/resources/ant-design/docs/empty
- Resource: Ant Design (https://jiguang132.com/resources/ant-design.md)
- All guides: https://jiguang132.com/resources/ant-design/docs.md

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](#jguang-common-props)

```jsx
<Empty>
  <Button>Create</Button>
</Empty>
```

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), 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](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), 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`

```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 {#jguang-common-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

```bash
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.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt