Feedback messages


Utilize Mensagens de Feedback para comunicar o estado das ações dos utilizadores, como confirmações de sucesso, alertas de erro ou avisos importantes. Este componente é crucial para orientar e informar os utilizadores sobre os resultados de suas interações com a interface, melhorando a transparência e a confiança no sistema.

Este componente, mensagem de página, é visto no topo da página quando foi executada alguma ação e existe a necessidade de dar feedback ao utilizador sobre essa ação.

O tempo que a mensagem está presente pode ser ajustada, sendo que as mensagens de erro e de aviso só desaparecem quando o utilizador carrega sobre a cruz, nela apresentada.

Características Principais

Comunicação Clara

Fornece informações imediatas sobre o sucesso ou falha de uma ação.

Suporte ao Utilizador

Ajuda a corrigir erros e a entender o funcionamento da aplicação.

Variedade de Tipos

Pode variar desde mensagens simples de sucesso até alertas complexos de erro ou avisos críticos.

Exemplo de Utilização
  • Confirmações de envio de formulário ou conclusão de transação.
  • Alertas de erro ao inserir dados inválidos.
  • Avisos sobre mudanças importantes no sistema ou na política de uso.

Incorpore Mensagens de Feedback sempre que desejar proporcionar uma experiência de utilizador mais segura e orientada, assegurando que os utilizadores estejam sempre informados sobre as ações que realizam dentro da sua interface.

Exemplos


Esta é uma mensagem de feedback de ERRO que pode ser alterada
Esta é uma mensagem de feedback de INFORMAÇÃO que pode ser alterada
Esta é uma mensagem de feedback de SUCESSO que pode ser alterada
Esta é uma mensagem de feedback de ALERTA que pode ser alterada
                                                    
<div class="gra-feedback-msg error">
    <span class="text">Esta é uma mensagem de feedback de ERRO que pode ser alterada</span>
    <span class="closeIcon"></span>
</div>
<div class="gra-feedback-msg info gra-margin-top-s">
    <span class="text">Esta é uma mensagem de feedback de INFORMAÇÃO que pode ser alterada</span>
    <span class="closeIcon"></span>
</div>
<div class="gra-feedback-msg success gra-margin-top-s">
    <span class="text">Esta é uma mensagem de feedback de SUCESSO que pode ser alterada</span>
    <span class="closeIcon"></span>
</div>
<div class="gra-feedback-msg alert gra-margin-top-s">
    <span class="text">Esta é uma mensagem de feedback de ALERTA que pode ser alterada</span>
    <span class="closeIcon"></span>
</div>