Notifikasi Toast Sukses

Ini adalah UI yang ditampilkan di tepi layar untuk memberi tahu pengguna bahwa tindakan pengguna (menyimpan, mengirim, dll.) telah berhasil diselesaikan.

Pratinjau

Kasus & Fitur Penggunaan

• Umpan Balik Sistem: Segera mengomunikasikan hasil keberhasilan tindakan pengguna, seperti “Tersimpan” atau “Pengiriman selesai”.
• Pemberitahuan proses asinkron: Ideal untuk kasus di mana Anda ingin diberi tahu secara diam-diam tanpa mengganggu pekerjaan pengguna, seperti saat proses selesai di latar belakang.
• Hilang otomatis: Biasanya menghilang secara otomatis setelah jangka waktu tertentu untuk mengosongkan ruang layar.

Poin-poin penting dari desain dan UX (Desain & UX)

• Penempatan yang bijaksana: Tempatkan di sudut layar (misalnya kanan bawah atau kanan atas) sehingga tidak mengganggu konten atau pekerjaan utama.
• Kejernihan visual: Gunakan ikon dan batas berwarna hijau (emerald atau green) untuk menunjukkan keberhasilan dalam mengomunikasikan pemberitahuan positif secara intuitif.
• Fungsi penutupan manual: Menyediakan tombol × (tutup) sehingga pengguna dapat mengabaikan notifikasi sendiri, sehingga memberi mereka rasa kontrol yang lebih besar.

Cara menyesuaikan (Panduan Kustomisasi)

• Warna berdasarkan status: Dengan mengganti kelas Tailwind, Anda dapat merespons berbagai kondisi dengan mengubah warna menjadi merah (red) untuk pemberitahuan kesalahan, kuning (yellow) untuk peringatan, dan biru (blue) untuk informasi.
• Menambahkan animasi: Anda dapat menambahkan animasi yang meluncur dari bawah saat ditampilkan atau animasi memudar saat menghilang menggunakan CSS atau JS.

Kode implementasi (Implementasi)

<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>