Pular para o conteúdo

Padrões

Vazio, erro e carregando

Nenhuma tela termina num beco. Vazio diz o próximo passo, erro diz o que fazer, carregando mostra a forma do que vem.

Na prática#

Os três estados de uma lista

Regras#

  1. 01Vazio usa EmptyState com a coruja vigiando e uma ação quando houver.
  2. 02Erro recuperável usa ErrorBanner com "Tentar de novo". A mensagem diz a causa em linguagem da pessoa.
  3. 03Carregando lista ou cartão usa Skeleton com a forma final; ação curta usa Button loading.
  4. 04Espera que a pessoa não controla ocupa a tela com StatusView working: diga quanto demora e o que não fazer.
  5. 05Aviso que fica enquanto durar a condição é Notice, preso ao conteúdo. Toast é só para o que passa.
  6. 06Célula sem dado fica vazia. Nunca invente valor, nunca escreva "N/A" em dado financeiro.

Evite#

  • Ilustração genérica de caixa vazia.
  • Mensagem técnica ("Error 500") sem próxima ação.
  • Spinner de página inteira para uma lista.
  • Tela de espera sem saída nenhuma.

Peças usadas#

Tabs

Tabs

Segmento: trilho rebaixado com um papel que desliza até a aba ativa. Linha: sublinhado azul para conteúdo longo. Base Radix.

EmptyState

EmptyState

Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.

ErrorBanner

ErrorBanner

Erro recuperável com a saída já montada: causa em linguagem humana e "Tentar de novo". É o Notice de perigo com o botão pronto.

Skeleton

Skeleton

A forma da peça que ainda não chegou. Raio, altura e etiqueta iguais aos da peça real. Sempre aria-hidden; quem carrega anuncia.