Componentes

25. Empty state

estávelseed-componentes.md v1.43 · §25seção 27 de 9825-empty-state-estavel-validado-pelo-rafael-em.md · MD5 96cd0ddc

Título completo no canon: 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#

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.)

BancadaSEED DS v2 — Preview Bloco 3 completo — v0.23c (CP-P4)abrir em página própria ↗

Também cita o §25: banco-cn, tela-busca, tela-detalhe, tela-lista, tela-onboarding, tela-quadro, tela-tabela.