Alert

Pesan penting di dalam halaman: informasi, hasil yang berhasil, peringatan, atau error.

Dasar

Isi title dan description. Tanpa prop lain, alert tampil sebagai informasi (primary + soft) dengan ikon yang sesuai.

Jadwal pickup berubah

Pickup minggu ini dipindah ke hari Kamis, 25 September, pukul 08.00.

Warna

Warnanya sama dengan Button, dan ikonnya ikut berganti. Pilih warna berdasarkan makna pesan, bukan tampilannya.

Informasi

Data laporan diperbarui setiap hari pukul 00.00.

Catatan

Perubahan alamat berlaku mulai pickup berikutnya.

Laporan terkirim

Laporan timbangan 12 September sudah diterima tim operasional.

Kuota hampir habis

Sisa kuota pickup bulan ini tinggal 2 kali.

Gagal menyimpan

Koneksi terputus. Periksa jaringan, lalu coba lagi.

Variant

soft (default) untuk sebagian besar kebutuhan. solid sangat mencolok, jadi pakai seperlunya.

Soft

Default. Cocok untuk sebagian besar pesan di dalam halaman.

Outline

Lebih tenang, untuk pesan di atas latar yang sudah berwarna.

Solid

Paling mencolok. Pakai seperlunya, misalnya banner di atas halaman.

Judul atau deskripsi saja

Keduanya opsional. Pakai sesuai panjang pesannya.

Hanya judul, untuk pesan yang sangat singkat.

Hanya deskripsi. Cocok untuk catatan kecil di bawah form.

Dengan aksi

Slot actions untuk langkah lanjutan, misalnya mencoba lagi. Pakai tombol ukuran sm dengan warna yang sama.

Gagal mengunggah bukti timbang

Ukuran foto melebihi 5 MB. Kompres fotonya atau pilih foto lain.

Bisa ditutup

dismissible menambahkan tombol tutup. Ikat v-model:open kalau alert perlu dimunculkan lagi. Coba tutup alert di bawah.

Profil tersimpan

Perubahan nama perusahaan sudah disimpan.

Ikon

Ganti ikon dengan nama ikon Iconify (Lucide, Tabler, MDI, dan lainnya), atau sembunyikan dengan :icon="false".

Armada sedang menuju lokasi

Perkiraan tiba 15 menit lagi.

Tanpa ikon, untuk pesan yang sangat ringan.

Contoh: ringkasan error form

Isi slot default dengan markup bebas, misalnya daftar isian yang perlu diperbaiki setelah form dikirim.

Ada 2 isian yang perlu diperbaiki

Berat sampah wajib diisi.
Foto bukti timbang maksimal 5 MB.

API

Props

Prop	Tipe	Default	Keterangan
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'	'primary'	Makna pesan. primary untuk informasi umum, success untuk hasil berhasil, warning untuk peringatan, danger untuk error.
variant	'soft' \| 'outline' \| 'solid'	'soft'	Seberapa mencolok pesannya. solid paling kuat.
title	string	—	Judul singkat, dicetak tebal.
description	string	—	Isi pesan. Untuk isi yang lebih kaya (daftar, link), pakai slot default.
icon	string \| false	—	Nama ikon Iconify. Tanpa prop ini, ikon mengikuti warna. false untuk menyembunyikan ikon.
dismissible	boolean	false	Menampilkan tombol tutup.
v-model:open	boolean	true	Tampil atau tidaknya alert. Cukup diikat kalau alert perlu dimunculkan lagi setelah ditutup.
close-label	string	'Tutup'	Label tombol tutup untuk pembaca layar.

Slots

Slot	Tipe	Default	Keterangan
default	—	—	Isi pesan. Menggantikan prop description.
title	—	—	Menggantikan prop title.
icon	—	—	Mengganti ikon dengan konten sendiri.
actions	—	—	Tombol aksi di bawah pesan, misalnya “Coba lagi”.

Events

Event	Tipe	Default	Keterangan
close	() => void	—	Dipanggil saat tombol tutup ditekan.
update:open	(value: boolean) => void	—	Dipakai oleh v-model:open.