Feedback

Estado vazio

Empty state

Explica por que uma área ainda não tem conteúdo e o que pode ser feito.

□Sua coleção começa aqui.

Adicione seu primeiro projeto.

＋ Criar projeto

Exemplo didático · Representação visual do padrão

Quando usar

Acolher o primeiro uso ou orientar uma busca sem resultados.

Cuidados e acessibilidade

Diferencie ausência de dados, filtro sem resultado e erro de carregamento.

Partes e comportamento

Explicação da ausência, contexto e próxima ação possível.

Não confunda

Um conjunto vazio não é necessariamente falha: pode ser primeiro uso ou efeito de um filtro.

Exemplo de código

<section aria-labelledby="vazio">
  <h2 id="vazio">Sua coleção começa aqui</h2>
  <p>Adicione seu primeiro projeto.</p>
  <button type="button">Criar projeto</button>
</section>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Estado vazio (Empty state) em português do Brasil. Explica por que uma área ainda não tem conteúdo e o que pode ser feito. Contexto de uso: Acolher o primeiro uso ou orientar uma busca sem resultados. Estrutura: Explicação da ausência, contexto e próxima ação possível. Referência técnica: <section>. Requisito: Diferencie ausência de dados, filtro sem resultado e erro de carregamento. Considere também: Um conjunto vazio não é necessariamente falha: pode ser primeiro uso ou efeito de um filtro. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗