Docs›Componentes (Admin)›mad-empty-state
Componentes (Admin)

mad-empty-state

Placeholder de lista vazia.

Placeholder visual para listas/areas vazias. Mostra icone, titulo, descricao opcional e slot livre para acoes (botoes).

Props

Prop Tipo Default Descricao
title string '' Titulo principal (obrigatorio)
description string null Texto secundario explicativo
icon string 'inbox' Icone Lucide exibido no topo
class string '' Classes CSS extras

O conteudo (slot) e renderizado abaixo da descricao — usar para botoes de acao.

Uso basico

<mad-empty-state title="Nenhum registro encontrado" />

Com icone customizado e descricao

<mad-empty-state
    icon="search"
    title="Nenhum resultado"
    description="Tente ajustar os filtros ou usar outros termos de busca." />

Com acao (botao no slot)

<mad-empty-state
    icon="inbox"
    title="Nenhum pedido encontrado"
    description="Crie seu primeiro pedido para comecar.">
    <mad-btn navigate="PedidoVendaForm" variant="primary" icon="plus">Novo Pedido</mad-btn>
</mad-empty-state>

Com multiplas acoes

<mad-empty-state
    icon="folder-open"
    title="Pasta vazia"
    description="Adicione documentos ou crie uma subpasta.">
    <div style="display:flex;gap:8px;">
        <mad-btn navigate="GedDocumentForm" variant="primary" icon="upload">Enviar</mad-btn>
        <mad-btn open-drawer="nova-pasta" variant="outline" icon="folder-plus">Nova pasta</mad-btn>
    </div>
</mad-empty-state>

Variacoes de icone por contexto

Contexto Icone sugerido
Lista vazia generica inbox
Busca sem resultado search
Pasta/diretorio vazio folder-open
Sem notificacoes bell-off
Sem mensagens mail
Sem permissao lock
Erro/falha alert-triangle

Quando usar

Cenario Usar
Listagem retornou zero registros <mad-empty-state> no lugar da tabela
Busca/filtro sem resultados <mad-empty-state icon="search">
Aba/secao sem conteudo ainda <mad-empty-state> com botao para criar
Drawer/modal sem dados a exibir <mad-empty-state> no body

NUNCA fazer

{{-- ERRADO: montar empty state com div manual --}}
<div style="text-align:center;padding:48px;">
    <i data-lucide="inbox"></i>
    <p>Nenhum registro</p>
</div>

{{-- CERTO --}}
<mad-empty-state icon="inbox" title="Nenhum registro" />

{{-- ERRADO: usar so texto solto --}}
<p>Sem dados.</p>

{{-- CERTO --}}
<mad-empty-state title="Sem dados" description="Adicione o primeiro registro abaixo." />

{{-- ERRADO: button HTML nativo no slot --}}
<mad-empty-state title="Vazio">
    <button onclick="...">Criar</button>
</mad-empty-state>

{{-- CERTO: usar mad-btn com navigate/mad:click --}}
<mad-empty-state title="Vazio">
    <mad-btn navigate="MeuForm" variant="primary" icon="plus">Criar</mad-btn>
</mad-empty-state>