Pattern · Lumina
Empty State
Tela vazia é oportunidade, não falha. Mostra o próximo passo, com voz humana e CTA claro. Nunca um genérico 'Nenhum dado encontrado'.
Três níveis
Sua caixa está vazia
Quando começar, suas mensagens vão aparecer aqui.
Nada encontrado
Não achamos resultado para "moods escuros". Tenta outro termo.
Comece pelo primeiro
Crie seu primeiro componente para vê-lo aparecer aqui.
Receita
Ícone grande + título curto + uma frase de contexto + CTA principal.
TSX
Três cenários comuns
| Cenário | Voz | CTA |
|---|---|---|
| Primeira vez | acolhedora, animada | primary, ação principal |
| Busca sem resultado | honesta, neutra | outline, “limpar busca” |
| Lista esvaziada | leve, sugestiva | ghost, “adicionar de novo” |
Anti-padrões
- “Nenhum item encontrado” sem CTA. É beco sem saída.
- Ilustração genérica de pessoinha confusa. Lumina não desenha pessoa.
- Trocadilho forçado. “Que vazio!” não é simpático, é constrangedor.