Visão geral

O Empty é um componente de estado nulo — usado quando uma lista, tabela ou área de conteúdo não tem dados.

Demo básica

Nenhuma mensagem

Você não tem mensagens no momento. Quando chegar algo, aparece aqui.

Import

import { Empty } from "@/components/empty"

Variações

O Empty se adapta a diferentes contextos de estado vazio.

Sem resultados

Nenhum item corresponde à sua busca. Tente termos diferentes.

Pasta vazia

Esta pasta não tem arquivos.

Nenhum dado

Nenhum registro encontrado para o período selecionado.

Padrão de implementação

Como usar o Empty em tabelas, listas e áreas de conteúdo.

Empty básico

import { Empty } from "@/components/empty"
import { InboxIcon } from "lucide-react"

<Empty
  icon={<InboxIcon />}
  title="Caixa vazia"
  description="Não há itens para exibir."
  action={<Button>Adicionar item</Button>}
/>

Em tabela de dados

<Table>
  <TableHeader>...</TableHeader>
  <TableBody>
    {data.length === 0 ? (
      <TableRow>
        <TableCell colSpan={5}>
          <Empty
            icon={<SearchIcon />}
            title="Nenhum resultado"
            description="Tente ajustar os filtros."
          />
        </TableCell>
      </TableRow>
    ) : (
      data.map((row) => <TableRow key={row.id}>...</TableRow>)
    )}
  </TableBody>
</Table>

Props e uso

API do componente Empty customizado.

Props

icon

ReactNode

Ícone ou SVG exibido no topo. Exibido em container circular com bg-muted.

title

string

Título principal do estado vazio.

description

string

Texto explicativo sobre o estado vazio.

action

ReactNode

Botão ou link de ação contextual.

className

string

Classes adicionais para o container.

Boas práticas

Sempre inclua uma ação quando o usuário puder fazer algo para resolver o estado vazio.

Use linguagem positiva e orientada para a ação: "Crie seu primeiro projeto" em vez de "Nenhum projeto encontrado".

Para estados de erro (não apenas vazio), considere usar o componente Alert em vez de Empty.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter