logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
YouMindTRACTIANLobeHubCodeRabbit
6.5.0
  • Components Overview
  • Changelog
    v6.5.0
  • General
    • Button
    • FloatButton
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
    • Grid
    • Layout
    • Masonry
      6.0.0
    • Space
    • Splitter
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
      DEPRECATED
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • App
    • BorderBeam
      6.4.0
    • ConfigProvider
    • Util
When To Use
Examples
Basic
Choose image
Customize
ConfigProvider
Custom semantic dom styling
No description
API
Built-in images
Semantic DOM
Design Token

Empty

Empty state placeholder.
Importimport { Empty } from 'antd';
GitHub
components/emptyIssueOpen issues
Docs
Edit this pageLLMs.md
DescriptionsImage

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
X
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
For Agents
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

  • When there is no data provided, display for friendly tips.
  • User tutorial to create something in fresh new situation.

Examples

API

Common props ref:Common props

jsx
<Empty>
<Button>Create</Button>
</Empty>
PropertyDescriptionTypeDefaultVersionGlobal Config
classNamesCustomize class for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-5.23.0
descriptionCustomize descriptionReactNode-×
imageCustomize image. Will treat as image url when string providedReactNodeEmpty.PRESENTED_IMAGE_DEFAULT5.27.0
imageStyleThe style of image, please use styles.image insteadCSSProperties-×
stylesCustomize 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

  • Empty.PRESENTED_IMAGE_DEFAULT

Semantic DOM

Design Token

Global TokenHow to use?
Token NameDescriptionTypeDefault Value
colorTextDescriptionControl the font color of text description.stringrgba(0,0,0,0.45)
controlHeightLGLG component heightnumber40
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
lineHeightLine height of text.number1.5714285714285714
marginControl the margin of an element, with a medium size.number16
marginXLControl the margin of an element, with an extra-large size.number32
marginXSControl the margin of an element, with a small size.number8
opacityImageControl image opacitynumber1
Basic

Simplest Usage.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Choose image

You can choose another style of image by setting image to Empty.PRESENTED_IMAGE_SIMPLE.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Customize

Customize image source, image size, description and extra content.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
ConfigProvider

Use ConfigProvider set global Empty style.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Custom semantic dom styling

You can customize the semantic dom style of Empty by passing objects/functions through classNames and styles.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
6.0.0
No description

Simplest Usage with no description.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
No data
No data
No data
No data
empty
Customize Description

Select

TreeSelect

Cascader

Transfer

0 item

Data Not Found

0 item

Data Not Found

Table

NameAge

Data Not Found

List

Data Not Found

No data
Object styles
No data
Function styles
No data
No data
Customize Description
  • root
    5.23.0
    Root element, sets text alignment, font and line height styles
  • image
    5.23.0
    Image element, sets height, opacity, margin and image styles
  • description
    5.23.0
    Description element, sets text color styles
  • footer
    5.23.0
    Footer element, sets top margin and action button styles