Empty

Muestra contenido de marcador de posición cuando no hay datos para mostrar.

Importar

import { Empty } from 'asterui'

Ejemplos

Empty Básico

Estado vacío simple con imagen predeterminada.

</>

No data

import { Empty } from 'asterui'

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

export default App

Descripción Personalizada

Estado vacío con texto de descripción personalizado.

</>

No data available

import { Empty } from 'asterui'

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

export default App

Imagen Personalizada

Estado vacío con imagen o icono personalizado.

</>

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

Con Botón de Acción

Estado vacío con botón de acción.

</>

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

Imagen Simple

Estado vacío minimalista con imagen más pequeña.

</>

No results

import { Empty } from 'asterui'

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

export default App

API

Empty

Propiedad	Descripción	Tipo	Predeterminado
description	Texto o nodo a mostrar como descripción	React.ReactNode	'No Data'
image	Imagen o icono personalizado; establece en null para ocultar	React.ReactNode	Empty.PRESENTED_IMAGE_DEFAULT
imageStyle	Estilo aplicado al contenedor de imagen	React.CSSProperties	-
children	Contenido adicional como botones o acciones	React.ReactNode	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para el componente	string	'empty'