Empty

Exiba conteúdo de placeholder quando não há dados para mostrar.

Importação

import { Empty } from 'asterui'

Exemplos

Empty Básico

Estado vazio simples com imagem padrão.

</>

No data

import { Empty } from 'asterui'

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

export default App

Descrição Personalizada

Estado vazio com texto de descrição personalizado.

</>

No data available

import { Empty } from 'asterui'

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

export default App

Imagem Personalizada

Estado vazio com imagem ou ícone 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

Com Botão de Ação

Estado vazio com botão de ação.

</>

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

Imagem Simples

Estado vazio minimalista com imagem menor.

</>

No results

import { Empty } from 'asterui'

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

export default App

API

Empty

Propriedade	Descrição	Tipo	Padrão
description	Texto ou nó para exibir como descrição	React.ReactNode	'No Data'
image	Imagem ou ícone personalizado; defina como null para ocultar	React.ReactNode	Empty.PRESENTED_IMAGE_DEFAULT
imageStyle	Estilo aplicado ao container da imagem	React.CSSProperties	-
children	Conteúdo extra como botões ou ações	React.ReactNode	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para o componente	string	'empty'