logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Chose image
Customize
ConfigProvider
No description
API
Built-in images
Design Token

Empty

    • DescriptionsImage

    Resources

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

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    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

    Simplest Usage.

    expand codeexpand code
    Chose image

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

    expand codeexpand code
    Customize

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

    expand codeexpand code
    ConfigProvider

    Use ConfigProvider set global Empty style.

    expand codeexpand code
    No description

    Simplest Usage with no description.

    expand codeexpand code

    API

    Common props ref：Common props

    <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

    Design Token

    Global Token

    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