Modal Component
ModalComponent adalah komponen overlay dasar di Next-Light untuk menampilkan dialog, form, atau pesan penting. Modal muncul di tengah layar dengan backdrop gelap dan dapat ditutup melalui tombol close, klik area luar, atau aksi dari pengguna. Komponen ini dibuat sederhana, mudah dipakai, dan konsisten di seluruh aplikasi.
Contoh Penggunaan
Contoh Modal
Kode berhasil di copy!
Properti
- show (wajib) [ boolean ]
Menampilkan atau menyembunyikan modal.
- onClose (wajib) [ () => void ]
Dipanggil ketika modal ditutup oleh pengguna.
- title (opsional) [ string | ReactNode ]
Teks atau elemen yang tampil sebagai judul modal.
- footer (opsional) [ ReactNode ]
Bagian footer modal seperti tombol aksi atau catatan kecil.
- className (opsional) [ string ]
Menambahkan styling custom pada modal.
Floating Page Component
FloatingPageComponent adalah versi overlay yang tampil seperti halaman mengambang dari sisi kanan layar. Komponen ini cocok digunakan untuk form yang lebih panjang, detail informasi, atau tampilan yang membutuhkan ruang lebih luas dibanding modal biasa. Floating Page tetap dapat ditutup melalui ikon close atau klik area luar.
Contoh Penggunaan
Floating Page
Kode berhasil di copy!
Properti
- show (wajib) [ boolean ]
Menentukan apakah Floating Page ditampilkan.
- onClose (wajib) [ () => void ]
Dipanggil saat pengguna menutup Floating Page.
- title (opsional) [ string | ReactNode ]
Judul panel mengambang.
- footer (opsional) [ ReactNode ]
Bagian footer, biasanya catatan atau tombol aksi.
- className (opsional) [ string ]
Menambahkan styling khusus pada floating panel.
Modal Confirm Component
ModalConfirmComponent adalah komponen dialog konfirmasi bawaan Next-Light. Komponen ini digunakan untuk aksi yang membutuhkan persetujuan pengguna seperti menghapus data, melakukan proses penting, atau tindakan yang tidak dapat dibatalkan. Tampilan modal ini sederhana, langsung, dan memiliki tombol aksi bawaan.
Contoh Penggunaan
Gagal
Berhasil
Kode berhasil di copy!
Properti
- show (wajib) [ boolean ]
Menampilkan dialog konfirmasi.
- onClose (wajib) [ () => void ]
Dijalankan ketika dialog ditutup (baik dari tombol close maupun backdrop).
- title (opsional) [ string | ReactNode ]
Judul konfirmasi.
- description (opsional) [ string | ReactNode ]
Penjelasan singkat mengenai aksi yang diminta konfirmasi.
- onConfirm (opsional) [ () => void ]
Callback ketika pengguna menekan tombol konfirmasi.
- className (opsional) [ string ]
Menambahkan styling tambahan.
Toast Component
ToastComponent adalah komponen notifikasi ringan di Next-Light yang muncul secara sementara di bagian atas atau bawah layar. Komponen ini cocok untuk menampilkan pesan cepat seperti sukses, error, atau informasi umum tanpa mengganggu alur pengguna.