logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.1
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • 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
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0
When To Use
Examples
Basic
Choose image
Customize
ConfigProvider
No description
API
Built-in images
Semantic DOM
Design Token

Empty

Empty state placeholder.
Importimport { Empty } from "antd";
Sourcecomponents/empty
Docs
Edit this pageChangelog
contributors
  • 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
    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
    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>
    PropertyDescriptionTypeDefaultVersion
    descriptionCustomize descriptionReactNode-
    imageCustomize image. Will treat as image url when string providedReactNodeEmpty.PRESENTED_IMAGE_DEFAULT
    imageStyleThe style of imageCSSProperties-

    Built-in images

    • Empty.PRESENTED_IMAGE_SIMPLE

    • Empty.PRESENTED_IMAGE_DEFAULT

    Semantic DOM

    Design Token

    Global TokenHow to use?
    Basic

    Simplest Usage.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Choose image

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

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Customize

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

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    ConfigProvider

    Use ConfigProvider set global Empty style.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    No description

    Simplest Usage with no description.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    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
    No data
    Customize Description
    • root
      5.23.0
      Root element
    • image
      5.23.0
      Image element
    • description
      5.23.0
      Description element
    • footer
      5.23.0
      Footer element