Feedback

Estado de erro

Error state

Informa que uma operação falhou e oferece uma forma de recuperação.

!Não foi possível carregar.

Sua conexão pode ter sido interrompida.

Tentar novamente

Exemplo didático · Representação visual do padrão

Quando usar

Ajudar a retomar uma tarefa interrompida.

Cuidados e acessibilidade

Explique o impacto e preserve os dados; evite mensagens que culpem a pessoa.

Partes e comportamento

Problema ocorrido, impacto na tarefa e forma de recuperação.

Não confunda

Ausência de resultados não deve ser apresentada como erro do sistema.

Exemplo de código

<div role="alert">
  <p>Não foi possível carregar os dados.</p>
  <button type="button">Tentar novamente</button>
</div>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Estado de erro (Error state) em português do Brasil. Informa que uma operação falhou e oferece uma forma de recuperação. Contexto de uso: Ajudar a retomar uma tarefa interrompida. Estrutura: Problema ocorrido, impacto na tarefa e forma de recuperação. Referência técnica: role="alert". Requisito: Explique o impacto e preserve os dados; evite mensagens que culpem a pessoa. Considere também: Ausência de resultados não deve ser apresentada como erro do sistema. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗