---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 25
titulo: "Empty state — `estável` · validado pelo Rafael em 2026-08-04 (1 ciclo de crítica: regra do botão-morto de preview; suite E 14/14) · fecha o Bloco 3"
sequencia: 27 de 98
bytes_do_corpo: 6185
md5_do_corpo: 96cd0ddc801abd24ec7f192659c09dec
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 25. Empty state — `estável` · validado pelo Rafael em 2026-08-04 (1 ciclo de crítica: regra do botão-morto de preview; suite E 14/14) · fecha o Bloco 3

> **Base (3 rodadas, 2026-08-04):** R1 — NN/g (empty states em aplicações complexas; o painel de alertas vazio de um ERP deixa o usuário sem saber se houve erro ou falta de acesso — o texto existe para matar essa dúvida), Polaris (componente é para PÁGINA vazia; nunca culpar o usuário; orientado a ação), Carbon empty states pattern, Atlassian, GitLab Pajamas (o mais prescritivo: tipos, título ≤5 palavras sem ponto, zero-resultados SEM CTA com copy exata). R2 — shadcn Empty (composição Header/Media/Title/Description/Content; taxonomia de 5 tipos), Mobbin, Setproduct. R3 — SAP Fiori (empty states por container: tile → card → página; illustrated message com 4 tamanhos de ilustração: dot 45px, spot 128px, dialog, scene; até 2 CTAs; mensagem orientada a solução). Heranças aplicadas sem re-pesquisa: D8/D9 (zero-resultados), S5 (timeout do skeleton), botão §1 (CTA), marca v5.0 (Grafismo v2/EEny).

### 25.1 Taxonomia Z1 — seis tipos, nunca um "vazio genérico" *(SUP-3 de 2026-08-14: era cinco; entra a Bifurcação, dispositivo C36 do confronto)*

| Tipo | Regra | Fonte |
|---|---|---|
| **Primeiro uso** | Educativo + CTA de criação primário; secundária "saiba mais" opcional | Polaris |
| **Esvaziado/concluído** | Tom de conclusão ("Tudo em dia"), sem urgência; CTA opcional | shadcn |
| **Zero-resultados** | HERDA D8/D9: reflete a query, sugere ajuste, ação = limpar filtros; **SEM CTA de criação** ("não achou" nunca vira "crie um novo" por engano) | GitLab (copy exata: "Edite sua busca e tente de novo") + D8/D9 |
| **Erro de carga** | Recebe o timeout do S5 quando a região falhou: mensagem orientada a solução + "Tentar novamente"; severidade via alerta §15 no slot `role="alert"` | S5; NN/g |
| **Sem permissão** | Explica o porquê + quem contatar; nunca finge que a área não existe | shadcn (no-access) |
| **Bifurcação** *(novo, SUP-3)* | O vazio existe porque uma decisão estrutural ainda não foi tomada, e a decisão muda tudo o que vem depois. Apresenta as opções com as consequências visíveis. **Exatamente duas ações, as duas primárias** — escolha entre iguais, não ação com escape (exceção declarada à Z2). Ilustração continua `aria-hidden` (Z5); a descrição de uma frase carrega a diferença entre as opções EM TEXTO (Z4) — sem isso, leitor de tela escolhe às cegas. Cartões em `radius-xl`. **Quando é errado:** se 90% escolheriam a mesma opção, aplica-se o padrão e oferece-se a troca depois — bifurcar é empurrar ao usuário uma decisão que o produto podia tomar. *Alternativa descartada: tratá-la como variante de "primeiro uso" — primeiro uso educa e convida a UMA ação; a bifurcação exige escolha entre caminhos incompatíveis, e o mesmo tipo faria o CTA de criação aparecer onde é errado* | C36 (medido: cartões 350×438, duas ilustrações mostrando o resultado de cada escolha) |

> **Emenda à Z2 (mesmo supersede):** o teto de "até 2 ações" vale para os cinco primeiros
> tipos; **no tipo bifurcação, 2 é obrigação, não teto, e a hierarquia primária/secundária não
> se aplica.**

### 25.2 Decisões Z2–Z6

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| Z2 | Anatomia: mídia opcional + **título ≤5 palavras sem ponto** + descrição em frase completa com o próximo passo + **até 2 ações** (primária = botão §1; secundária = ghost/link) | GitLab; Fiori (até 2 CTAs) | Parágrafo de desculpas; 3+ ações |
| Z3 | Régua de escala por container: linha/tile = título+descrição · card pequeno = +CTA · card médio = +ilustração pequena (spot) · página = composição completa (scene). Componente de página NUNCA em célula | Fiori (escala explícita por container + 4 tamanhos de ilustração); Polaris (empty state de página ≠ elemento) | Ilustração gigante em slot de tabela |
| Z4 | Microcopy: encorajador, nunca culpa; orientado a SOLUÇÃO; proibido o vazio seco ("Sem dados") — sempre porquê + próximo passo; zero-resultados reflete a query | Polaris; NN/g (caso ERP); Mobbin | "Nenhum registro encontrado." e só |
| Z5 | Ilustração segue marca v5.0 (Grafismo v2, sem recriar assets): **EEny permitido em primeiro-uso e esvaziado; PROIBIDO em erro e sem-permissão** (severidade não é lugar de mascote). Ilustração DECORATIVA (`aria-hidden`) — a informação mora no texto | Fiori (ilustração adiciona personalidade, a mensagem carrega); regra de mascote v5.0 estendida — **regra de marca nova, martelada pelo Rafael em 2026-08-04** | Mascote em tela de erro; informação só na imagem |
| Z6 | Comportamento: conteúdo ESTÁTICO — sem live region própria (quem anuncia a transição é o fluxo causador: busca D4, carregamento R4; §1.13 uma live region por componente); se existe conteúdo oculto (arquivados), o caminho até ele permanece visível; CTA com toda a mecânica do §1 | GitLab (arquivados); §1.13 | Anúncio duplicado; esconder o caminho dos arquivados |

### 25.3 Anatomia e tokens

Bloco centralizado; título Montserrat 700 1.05rem `--seed-text-primary`; descrição `--seed-text-secondary` ≤2 frases; gap 12; padding vertical 32 (página) / 16 (card); ícone 40px em `--seed-cinza-300`/dark cinza-600 quando não há ilustração; ilustração spot ≤128px. Erro de carga: o alerta §15 senta ACIMA do bloco. Sem cor de severidade no empty em si (neutro por natureza — a severidade mora no alerta).

### 25.4 Os 7 testes

1. Pares herdados (texto primário/secundário medidos nos tokens). 2. Tipo carregado por texto (título+descrição), nunca só pela imagem. 3. Grayscale: por construção (Z5 — informação no texto). 4. Zero-resultados × primeiro-uso a 1s (sem CTA de criação × com). 5. Um empty por região; sem live region duplicada. 6. Estático e visível por natureza. 7. 360px: bloco centralizado, CTA full-width herdando o §1 v0.7, ilustração colapsa antes do texto. *(Verificado: suite v0.23, aprovado.)*

---