Lompat ke isi
CirccaHIG

Komponen / Lapisan & umpan balik

Toast

HUD gelap singkat di bawah tengah layar untuk konfirmasi setelah aksi ("PO-2026-0142 disimpan"), dengan aksi Urungkan opsional. Hilang sendiri tanpa menghentikan pekerjaan.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pakai untuk konfirmasi singkat setelah aksi berhasil: disimpan, disalin, diarsipkan, dikirim.
  • Tawarkan Urungkan untuk aksi yang bisa dibalik, alih-alih meminta konfirmasi di depan dengan Dialog.
  • Satu pesan, satu baris, maksimal satu aksi.

Hindari

  • Jangan memakai Toast untuk keadaan yang harus tetap terlihat (dokumen dikembalikan, data belum lengkap) — pakai Banner.
  • Jangan memakai Toast untuk keputusan atau aksi merusak yang tidak bisa diurungkan — pakai Dialog.
  • Jangan menaruh informasi penting satu-satunya di Toast: ia hilang sendiri dan bisa terlewat.
  • Jangan memunculkan Toast untuk setiap perubahan kecil atau saat halaman dimuat.

Contoh benar & salah

INV-2026-0192 diarsipkan

GunakanObjek + hasil dalam satu baris, dengan satu aksi Urungkan.

Data faktur INV-2026-0192 milik Rina Kartika (Finance) berhasil diarsipkan! Buka menu Arsip untuk mengembalikannya.

HindariKalimat panjang yang menjelaskan langkah berikutnya — pengguna tidak sempat membacanya. Pakai Banner.

Penulisan

  • Objek + hasil, tanpa subjek: "PO-2026-0142 disimpan", "Pengajuan Anisa Nugraha disetujui" — bukan "Data berhasil disimpan!".
  • Tanpa tanda seru dan tanpa titik di akhir; sebut nomor dokumen agar jelas apa yang berubah.
  • Label aksi satu kata kerja: "Urungkan", "Coba lagi", "Lihat".
  • Pesan gagal menyebut apa yang gagal ("INV-2026-0192 gagal dikirim"); bila perlu penjelasan sebab, pakai Banner.

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil