Toast

Toast adalah komponen yang digunakan untuk memberikan pesan singkat yang muncul sementara di layar untuk memberikan umpan balik instan kepada pengguna.

Komponen ini digunakan untuk mengonfirmasi tindakan yang baru saja dilakukan atau untuk memberi tahu pengguna tentang status sistem, seperti keberhasilan, kesalahan, atau informasi penting lainnya.

Toast muncul secara otomatis, sehingga tidak mengganggu konteks halaman dan akan menghilang setelah beberapa detik. Meski bersifat non-intrusif, toast tetap dapat menyertakan opsi tambahan seperti tombol untuk aksi pembatalan cepat.

Penggunaan

Gunakan Toast untuk menyampaikan informasi ringan dan sementara tanpa mengganggu interaksi utama pengguna.

Komponen ini efektif untuk memberi tahu hasil tindakan, status sistem, atau kesalahan kecil yang tidak memerlukan tindak lanjut langsung.

Anatomi

State (keadaan)

Neutral

Menampilkan pesan informasi umum, seperti notifikasi ringan atau konfirmasi sederhana.

Contoh: “Link copied to clipboard.”

Positif

Menampilkan umpan balik positif untuk tindakan yang berhasil diselesaikan.

Contoh: “Data saved successfully.”

Error

Menampilkan pesan kesalahan atau peringatan ketika tindakan gagal atau terjadi masalah sistem.

Contoh: “Oops! Something went wrong.”

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan toast untuk pesan ringan yang bersifat sementara.

❌ Dihindari

Hindari penggunaan toast untuk pesan kritis yang membutuhkan konfirmasi pengguna.

✅ Disarankan

Batasi satu toast aktif dalam satu waktu agar pengguna tidak kehilangan fokus.

❌ Dihindari

Jangan menampilkan terlalu banyak toast secara bersamaan.

✅ Disarankan

Pastikan teksnya singkat, jelas, dan langsung ke inti informasi.

❌ Dihindari

Hindari pesan yang terlalu panjang atau ambigu.

Penerapan

Halaman Kompetensi

Pada halaman kompetensi, toast digunakan untuk memberikan umpan balik instan kepada pengguna saat mereka melakukan pembaruan data, seperti menambah atau memperbarui riwayat pelatihan, tanpa mengganggu alur kerja utama.

Spesifikasi