Notifications
Mark all as readOrder Completed
5 minutes ago
New Message
10 minutes ago
Storage Warning
1 hour ago
New User Registered
2 hours ago
Payment Failed
Yesterday
Alerts
Notifikasi singkat untuk status dan pesan sistemKapan digunakan
Tampilan status singkat yang membutuhkan perhatian.
Memberi tahu pengguna ketika sebuah proses berhasil atau gagal.
Menampilkan informasi penting yang tidak mengganggu alur kerja utama.
Memberikan tindakan lanjut (link) seperti “View detail†tanpa memaksa dialog.
Pesan & Tone
Cocokkan warna dengan vokab status.| Primary / Info | Gunakan untuk pengumuman, update sistem. |
| Success | Konfirmasi proses berhasil, mis. pembayaran. |
| Warning | Peringatan ringan yang masih bisa diabaikan sesaat. |
| Danger | Kesalahan kritis yang perlu tindakan segera. |
Checklist pengalaman
Pastikan alert terasa ramah.- Gunakan kalimat singkat (maks 2 baris).
- Sertakan ikon hanya jika membantu persepsi status.
- Untuk aksi lanjut, gunakan link atau tombol ringan.
- Dismissible? Pastikan tidak menghapus informasi penting secara permanen.
Basic Alerts
Gunakan varian warna default untuk status inti.
Pembaruan sistem tersedia. Silakan muat ulang halaman.
Pembayaran Anda berhasil diproses.
Kuota penyimpanan hampir penuh, hapus item lama.
Server tidak merespons. Coba lagi beberapa saat.
<div class="alert alert-primary" role="alert">Pembaruan sistem tersedia. Silakan muat ulang halaman.</div>
<div class="alert alert-success" role="alert">Pembayaran Anda berhasil diproses.</div>
<div class="alert alert-warning" role="alert">Kuota penyimpanan hampir penuh, hapus item lama.</div>
<div class="alert alert-danger" role="alert">Server tidak merespons. Coba lagi beberapa saat.</div>Alerts dengan ikon
Ikon membantu pengguna mengenali status dengan cepat.
Product update
Paket fitur baru siap dicoba. Lihat catatan rilis untuk detail lengkap.
Security alert
Sesi akan berakhir jika kata sandi belum diganti dalam 60 menit.
Pastikan ikon memiliki arti jelas dan tidak sekadar dekoratif.
<div class="alert alert-info d-flex align-items-center gap-2" role="alert">
<i class="bi bi-info-circle fs-5"></i>
<div>
<strong class="d-block small text-uppercase text-primary">Product update</strong>
<span>Paket fitur baru siap dicoba. Lihat catatan rilis untuk detail lengkap.</span>
</div>
</div>Dismissible alerts
Gunakan pada pesan sementara yang boleh diabaikan.
System maintenance
Akses akan dihentikan sementara pada 23.00 WIB. Simpan pekerjaan Anda terlebih dahulu.
Heads up
Notifikasi email dinonaktifkan. Aktifkan kembali bila ingin menerima ringkasan harian.
Pastikan konten tetap tersedia di tempat lain (mis. pusat notifikasi) setelah alert ditutup.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<div class="fw-semibold text-warning text-uppercase small">System maintenance</div>
Akses akan dihentikan sementara pada 23.00 WIB. Simpan pekerjaan Anda terlebih dahulu.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Alerts dengan tautan
Gunakan .alert-link untuk aksi lanjutan tanpa meninggalkan konteks.
Pembaruan fitur tersedia. Lihat detail pada catatan rilis.
Butuh bantuan? Buka panduan implementasi untuk langkah lengkap.
Gunakan kata kerja jelas pada tautan, hindari kalimat ambigu seperti "klik di sini".
<div class="alert alert-primary" role="alert">
Pembaruan fitur tersedia. Lihat detail pada <a href="#" class="alert-link">catatan rilis</a>.
</div>