Empty state
Estado vazio que ocupa uma página, um card ou uma lista que ainda não tem nada para mostrar. Diz o que está vazio, por quê, e o que fazer em seguida.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions } from "@camaleo/react";Anatomia
Uma coluna centralizada com até quatro partes. Passe icon, title, description e actions, ou monte com as partes como filhos. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Nenhuma nota fiscal ainda
Emita a primeira nota, ou importe as que você já emitiu a partir de um arquivo CSV.
0 de 4 produtos
Nenhum produto para “fone de ouvido”
Confira a grafia, ou busque pela marca ou pelo modelo.
Busca sem resultado
Digite o nome de um produto e depois limpe a busca. Repita o termo no título para a pessoa ver o que mudar, e anuncie a contagem num role="status", porque o empty state em si não é lido quando aparece.
Não foi possível carregar seus pedidos
A conexão caiu antes de a lista chegar. Seus pedidos estão salvos; tente de novo daqui a pouco.
Falha ao carregar
Quando os dados não carregam, diga o que falhou e que nada se perdeu, e ofereça tentar de novo. O contato com o suporte é um link, porque leva a outro lugar.
Tudo em dia
Nenhuma notificação não lida. As novas aparecem aqui.
Nada pendente
Quando estar vazio é a boa notícia, uma confirmação curta basta: passe icon={null} para tirar o ícone de pasta padrão e deixe as ações de fora.
Pagamentos recentes
Outubro de 2026
Nenhum pagamento neste mês
Os pagamentos recebidos a partir de 01/10 aparecem aqui.
Dentro de um card
Mantenha o título do próprio card, para a pessoa saber qual seção está vazia, e diga quando ela vai se preencher.
Importe seus contatos
Envie uma planilha e criamos um contato para cada linha.
- CSV ou XLSX, até 5 MB
- Um contato por linha
- Colunas de nome e e-mail
Montado com as partes
Use as partes como filhos quando precisar de mais que um título e uma frase, como as regras de uma importação. Com filhos, nenhum ícone padrão é desenhado.
Nenhum projeto ainda
Um projeto reúne as tarefas, os arquivos e as pessoas de um trabalho.
Primeiro item
Crie um projeto e depois exclua todos. O botão clicado some junto com a tela, então o foco vai para o botão que toma o lugar dele, e uma mensagem de status conta o que aconteceu.
Em contexto
Um empty state costuma ficar onde o conteúdo vai estar: num card, abaixo de uma busca, no lugar de uma lista. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Caixa de suporte
0 abertosCaixa zerada
Os 18 chamados de hoje foram resolvidos. Os novos chamados da central de ajuda chegam aqui.
Catálogo
Nenhum produto para “mesa regulável”
Este produto ainda não está no catálogo. Cadastre-o, ou tente outro nome.
Equipe
Acme Studio · Plano gratuito, até 5 pessoas
Por enquanto, só você
Convide pessoas por e-mail. Elas veem seus projetos assim que aceitarem.
Boas práticas
Nenhuma nota fiscal ainda
Emita a primeira nota, ou importe as que você já emitiu a partir de um arquivo CSV.
Diga por que o espaço está vazio e coloque ali mesmo a ação que o preenche.
Vazio
Sem dados.
A pessoa não sabe se algo quebrou nem o que fazer, e vai embora.
Nenhuma nota fiscal ainda
A primeira nota leva uns dois minutos.
Nada deu errado ainda, então use um ícone neutro e diga como o primeiro passo é rápido.
Erro: 0 notas encontradas
Não existem registros. Fale com o administrador.
Ícone vermelho e a palavra "Erro" fazem a pessoa achar que perdeu dados.
Props
children; null tira o ícone.<h3>. Para outro nível, passe um <EmptyStateTitle as="h4"> como filho.EmptyStateIcon, EmptyStateTitle, EmptyStateDescription e EmptyStateActions aceitam os atributos do elemento HTML de cada um (span, h3, p, div). O EmptyStateTitle também aceita as (de h2 a h6, ou p; padrão h3) para definir o nível do título. O EmptyState aceita os atributos de uma div.
Styling hooks
Mude o visual sem copiar o componente: use os slots ou defina os tokens num elemento pai, num estilo ou no próprio empty state.
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- A prop title renderiza um <h3>. Dentro de um card cujo título também é <h3>, passe um <EmptyStateTitle as="h4"> como filho, para os títulos ficarem aninhados.
- O ícone fica dentro de aria-hidden, então o leitor de tela lê só o título e a descrição.
- O empty state não é uma região viva. Quando ele substitui resultados depois de uma busca ou exclusão, anuncie a mudança com um role="status" ao lado.
- Quando a ação que esvaziou a lista remove o botão com foco, mova o foco você mesmo para o próximo controle, como o campo de busca ou a ação principal do empty state.