Empty

Display placeholder content when there is no data to show.

Import

import { Empty } from 'asterui'

Examples

Basic Empty

Simple empty state with default image.

</>

No data

import { Empty } from 'asterui'

function App() {
  return (
      <Empty />
    )
}

export default App

Custom Description

Empty state with custom description text.

</>

No data available

import { Empty } from 'asterui'

function App() {
  return (
      <Empty description="No data available" />
    )
}

export default App

Custom Image

Empty state with custom image or icon.

</>

No files found

import { Empty } from 'asterui'

function App() {
  return (
      <Empty
        image={
          <svg className="w-16 h-16 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
        }
        description="No files found"
      />
    )
}

export default App

With Action Button

Empty state with action button.

</>

No items in your cart

Start Shopping

import { Empty, Button } from 'asterui'

function App() {
  return (
      <Empty description="No items in your cart">
        <Button color="primary">Start Shopping</Button>
      </Empty>
    )
}

export default App

Simple Image

Minimal empty state with smaller image.

</>

No results

import { Empty } from 'asterui'

function App() {
  return (
      <Empty
        image={Empty.PRESENTED_IMAGE_SIMPLE}
        description="No results"
      />
    )
}

export default App

API

Empty

Property	Description	Type	Default
description	Text or node to display as description	React.ReactNode	'No Data'
image	Custom image or icon; set to null to hide	React.ReactNode	Empty.PRESENTED_IMAGE_DEFAULT
imageStyle	Styling applied to the image container	React.CSSProperties	-
children	Extra content like buttons or actions	React.ReactNode	-
className	Additional CSS classes	string	-
data-testid	Test ID for the component	string	'empty'