← Batch 3 Batch 5 →
{{-- Batch nav --}}
@foreach ([1=>'Layout & Grid', 2=>'Forms', 3=>'Navigasi & Data', 4=>'Feedback', 5=>'UI Elements'] as $b => $label) Batch {{ $b }}: {{ $label }} @endforeach
{{-- ═══════════════════════════════════════ ALERTS ═══════════════════════════════════════ --}}

Alerts / Banners

@php $alerts = [ ['type' => 'success', 'icon' => 'check-circle', 'title' => 'Berhasil!', 'msg' => 'Pengajuan Anda telah berhasil disetujui dan sedang disiapkan.', 'bg' => 'bg-green-50 border-success dark:bg-success/10', 'ic' => 'text-success', 'tt' => 'text-success font-medium', 'tx' => 'text-green-700 dark:text-green-400'], ['type' => 'info', 'icon' => 'information-circle', 'title' => 'Informasi', 'msg' => 'Sistem akan mengalami pemeliharaan pada Minggu, 22 Juni 2026 pukul 00.00–04.00 WIB.', 'bg' => 'bg-blue-50 border-info dark:bg-info/10', 'ic' => 'text-info', 'tt' => 'text-info font-medium', 'tx' => 'text-blue-700 dark:text-blue-400'], ['type' => 'warning', 'icon' => 'exclamation-triangle', 'title' => 'Perhatian', 'msg' => 'Berkas lampiran Anda belum lengkap. Harap unggah foto KTP sebelum batas waktu.', 'bg' => 'bg-amber-50 border-warning dark:bg-warning/10', 'ic' => 'text-warning', 'tt' => 'text-warning font-medium', 'tx' => 'text-amber-700 dark:text-amber-400'], ['type' => 'error', 'icon' => 'x-circle', 'title' => 'Gagal', 'msg' => 'Pengajuan Anda ditolak karena NIK tidak sesuai dengan data kependudukan.', 'bg' => 'bg-red-50 border-danger dark:bg-danger/10', 'ic' => 'text-danger', 'tt' => 'text-danger font-medium', 'tx' => 'text-red-700 dark:text-red-400'], ]; @endphp @foreach ($alerts as $a)

{{ $a['title'] }}

{{ $a['msg'] }}

@endforeach
{{-- ═══════════════════════════════════════ MODAL ═══════════════════════════════════════ --}}

Modal / Dialog

{{-- Modal --}}

Konfirmasi Keputusan

Modal digunakan untuk konfirmasi tindakan penting atau menampilkan form tambahan.

Konten modal dapat berupa teks, form, atau komponen lainnya.

{{-- ═══════════════════════════════════════ OFFCANVAS ═══════════════════════════════════════ --}}

Offcanvas / Drawer

{{-- Overlay --}}
{{-- Drawer panel --}}

Filter Pengajuan

{{-- ═══════════════════════════════════════ TOAST ═══════════════════════════════════════ --}}

Toast / Notifikasi

Gunakan window.toast({ type, title, message }) — Toast Container sudah terpasang di layout utama.

@foreach (['success' => 'Berhasil', 'error' => 'Gagal', 'warning' => 'Perhatian', 'info' => 'Info'] as $type => $label) @endforeach
{{-- Preview statis --}}

Preview Statis

@foreach ([ ['type'=>'success','title'=>'Pengajuan Disetujui','msg'=>'KTP #481 telah disetujui.','border'=>'border-success','icon'=>'check-circle','ic'=>'text-success'], ['type'=>'error', 'title'=>'Gagal Menyimpan', 'msg'=>'Terjadi kesalahan pada server.','border'=>'border-danger','icon'=>'x-circle','ic'=>'text-danger'], ['type'=>'warning','title'=>'Sesi Akan Berakhir', 'msg'=>'Anda akan keluar dalam 5 menit.','border'=>'border-warning','icon'=>'exclamation-triangle','ic'=>'text-warning'], ['type'=>'info', 'title'=>'Update Tersedia', 'msg'=>'Versi baru portal sudah tersedia.','border'=>'border-info','icon'=>'information-circle','ic'=>'text-info'], ] as $t)

{{ $t['title'] }}

{{ $t['msg'] }}

@endforeach
{{-- ═══════════════════════════════════════ TOOLTIP ═══════════════════════════════════════ --}}

Tooltip

@foreach (['Atas' => 'top', 'Bawah' => 'bottom', 'Kiri' => 'left', 'Kanan' => 'right'] as $label => $pos)
Tooltip {{ $label }}
@endforeach