Pular para o conteúdo
Faculdade PhorteDesign System

EstadoVazio

Em andamento

O lugar do conteúdo que não há: a busca sem resultado, a lista de inscritos ainda vazia, o dia sem programação. Diz o que falta, em positivo, e o próximo passo, com uma ação só.

Função
Estado e aviso
Também chamado de
empty state, estado vazio, sem resultados, nenhum resultado, lista vazia
Mora em
app/components/molecules/EstadoVazio.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Com link
  3. Sem ação
  4. Contorno
  5. No filtro

Quando usar

Quando uma lista, uma busca ou um painel não tem nada para mostrar — e a pessoa precisa saber que não é erro nem carregamento.

Faça

  • Escreva o titulo em positivo, dizendo o que falta: "Nenhum curso encontrado", e não "Sua busca falhou".
  • Dê o próximo passo na descricao e, se houver, uma acao que o faça ("Limpar filtros", "Ver todos os cursos").
  • Ligue anunciar quando o vazio é resposta a um filtro ou busca na mesma tela.
  • Acerte o nivelDoTitulo conforme a página (padrão h3).

Evite

  • Culpar quem usa ou usar tom de erro: vazio não é falha.
  • Duas ações: a segunda disputa com a primeira; o resto vai no texto.
  • Ícone que carrega o sentido sozinho: ele é decorativo, e o título diz tudo.

Quando não usar. Quando algo falhou (a busca não respondeu, o envio deu erro): o Alert. Enquanto carrega: o Esqueleto. Para a página inteira que não existe: a página de erro.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Ícone — Da Lucide, 24px, num círculo de 56px com fundo `--card` e borda; decorativo.
  2. Título — 18px, negrito, `--ink`; nível por prop.
  3. Descrição — 14px, `--muted-foreground`, até 320px de largura.
  4. Ação — O Button `outline` pequeno (44px de alvo); link com `href`, botão sem ele.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoFundo --muted, para marcar o lugar do conteúdo numa página clara.
ContornoBorda tracejada e fundo --card, dentro de cartão ou painel.
AnunciadoCom anunciar, é role="status": o leitor lê quando aparece.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
O filtro esvazia a listaCom anunciar, o leitor ouve o título e a descrição, sem sair do filtro — testado na ficha.
A ação é acionadaFaz o onClick ou navega pelo href; quem chama decide o que volta (a lista, outra página) — testado na ficha.

Relacionados