Padrões

Estados Vazios

Quando não há conteúdo, oriente o usuário: ícone temático em stroke="#C8F53C", mensagem clara e ação principal opcional.

Anatomia

Coleção

Coleção vazia

Escaneie o código de barras ou busque para adicionar seus discos.

Ícone temático

stroke="#C8F53C" strokeWidth="1.5" w-16 h-16. Sempre outline — nunca fill. O ícone representa o tipo de conteúdo ausente.

Título

text-[#f5f5f5] font-semibold text-lg text-center. Descreve o estado, não o problema. "Coleção vazia", não "Erro ao carregar".

Descrição

text-[#888] text-sm text-center. Máximo 2 linhas. Orienta o próximo passo, não repete o título.

Ação primária

Botão filled opcional. Só aparece quando há ação óbvia. Ação secundária (outline) permitida se houver duas rotas igualmente válidas.

Coleção vazia

Escaneie o código de barras ou busque para adicionar seus discos.

Lista de desejos vazia

Busque um disco acima para salvar na lista.

Sem resultados

Nenhum disco encontrado para "Dark Side". Tente outro termo.

Nenhuma atividade

Siga colecionadores para ver o que estão adicionando.

Sem resultados

Do Ícone temático: lupa para busca, nota musical para coleção, bookmark para wantlist. Sempre stroke="#C8F53C" strokeWidth="1.5".

🔍

Sem resultados

Don't Não use emoji como ícone de estado vazio. Sem consistência visual entre plataformas e quebra o padrão de cor do sistema.

Estado sem ação óbvia

Lista de desejos vazia

Busque um disco para salvar.

Do Omita o botão quando não há ação óbvia. A descrição já orienta. Botão vazio ("OK") não tem utilidade.

Lista de desejos vazia

Don't Não adicione botão sem ação real. "OK" em estado vazio não faz nada e confunde o usuário.