Komponen / Lapisan & umpan balik

Banner

Pesan di dalam halaman yang tetap terlihat sampai keadaannya berubah: dokumen dikembalikan, data belum lengkap, sinkronisasi gagal.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Letakkan di atas isi yang dibahas (di bawah kepala dokumen, atau di atas form).
Satu Banner per keadaan. Bila ada beberapa masalah, gabungkan dalam satu Banner berisi daftar.
Tulis apa yang terjadi dan apa yang harus dilakukan; beri aksi bila ada langkah langsung.

Hindari

Jangan memakai Banner untuk konfirmasi singkat setelah aksi berhasil ("Tersimpan") — pakai Toast.
Jangan menumpuk beberapa Banner berwarna di satu layar.
Jangan memakai Danger untuk hal yang belum gagal — pakai Warning.

Dikembalikan oleh Finance · 2 Okt

PO customer belum bertanda tangan.

GunakanSiapa, kapan, alasan, dan langkah berikutnya dengan satu aksi.

Terjadi kesalahan

Silakan coba lagi.

HindariPesan umum tanpa sebab dan tanpa jalan keluar.

Judul menyebut kejadiannya: "Faktur INV-2026-0192 belum terkirim", bukan "Error" atau "Perhatian".
Deskripsi: sebab + langkah. "Koneksi ke Coretax terputus. Data tidak berubah — coba kirim lagi."
Label aksi berupa kata kerja: "Unggah ulang", "Coba lagi".