Toast

Notifikasi singkat di pojok kanan atas. Hilang sendiri setelah 5 detik dan bisa ditutup. Dibuat lewat window.ckToast() atau atribut data-ck-toast.

Lima nada

Latar lembut dengan strip aksen di kiri supaya hierarki jelas tanpa bergantung pada warna saja.

Lihat kode

<div class="ck-row ck-row-2 ck-wrap">
  <button class="ck-btn ck-btn--outline ck-btn--sm" data-ck-toast="default" data-ck-toast-title="Info" data-ck-toast-desc="Tersimpan sebagai draf.">Default</button>
  <button class="ck-btn ck-btn--outline ck-btn--sm" data-ck-toast="success" data-ck-toast-title="Berhasil disimpan" data-ck-toast-desc="Kuis Matematika Bab 3 sudah diperbarui.">Success</button>
  <button class="ck-btn ck-btn--outline ck-btn--sm" data-ck-toast="warning" data-ck-toast-title="Sisa waktu 5 menit" data-ck-toast-desc="3 soal belum dijawab.">Warning</button>
  <button class="ck-btn ck-btn--outline ck-btn--sm" data-ck-toast="error" data-ck-toast-title="Gagal menyimpan" data-ck-toast-desc="Koneksi terputus. Coba lagi.">Error</button>
  <button class="ck-btn ck-btn--outline ck-btn--sm" data-ck-toast="info" data-ck-toast-title="Ujian dimulai" data-ck-toast-desc="Kuis Fisika dibuka untuk 32 siswa.">Info</button>
</div>

Memanggil dari JavaScript

Fungsi tersedia global setelah kit dimuat. Cocok untuk notifikasi yang muncul setelah permintaan jaringan selesai.

Lihat kode

window.ckToast({
  variant: 'success',        // default | success | error | warning | info
  title: 'Jawaban tersimpan',
  description: '20 dari 20 soal terjawab.',
  duration: 5000            // ms, opsional
});