Notificação Toast de Sucesso

Esta é uma UI exibida na borda da tela para notificar o usuário de que a ação do usuário (salvar, enviar, etc.) foi concluída com êxito.

Visualização

Casos de uso e recursos

• Feedback do sistema: comunica imediatamente os resultados de sucesso das ações do usuário, como “Salvo” ou “Envio concluído”.
• Notificação de processo assíncrono: Ideal para casos em que você deseja ser notificado de forma discreta, sem interferir no trabalho do usuário, como quando um processo é concluído em segundo plano.
• Desaparecimento automático: Geralmente desaparece automaticamente após um determinado período de tempo para liberar espaço na tela.

Pontos-chave de design e UX (Design & UX)

• Colocação discreta: Coloque-o no canto da tela (por exemplo, canto inferior direito ou canto superior direito) para não interferir no conteúdo principal ou no trabalho.
• Clareza visual: Use ícones e bordas verdes (emerald ou green) para indicar sucesso na comunicação intuitiva de notificações positivas.
• Função de fechamento manual: Fornece um botão × (fechar) para que os próprios usuários possam dispensar as notificações, proporcionando-lhes uma maior sensação de controle.

Como personalizar (Guia de Personalização)

• Cor por status: Ao substituir a classe Tailwind, você pode responder a diversas condições alterando a cor para vermelho (red) para notificações de erro, amarelo (yellow) para avisos e azul (blue) para informações.
• Adicionando animação: você pode adicionar uma animação que desliza de baixo para cima quando exibida ou uma animação de esmaecimento quando desaparece usando CSS ou JS.

Código de implementação (Implementação)

<div class="flex items-center w-full max-w-sm p-4 text-gray-800 bg-white dark:bg-zinc-900 dark:text-gray-200 rounded-lg shadow-lg border border-emerald-100 dark:border-emerald-900/30" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-500 bg-emerald-100 rounded-lg dark:bg-emerald-800/30 dark:text-emerald-400">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
</div>
<div class="ml-3 text-sm font-medium">Successfully saved changes.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-zinc-900 dark:hover:bg-zinc-800">
  <span class="sr-only">Close</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>