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

Buttons

{{-- Variants --}}

Variants

{{-- Sizes --}}

Sizes

{{-- With icon --}}

Dengan Ikon

{{-- Icon-only --}}

Icon Only

{{-- States --}}

States

{{-- ═══════════════════════════════════════ BADGES ═══════════════════════════════════════ --}}

Badges

{{-- Status badges (via component) --}}

Status Badge (x-status-badge)

@foreach (['pending', 'approved', 'rejected', 'processing'] as $s) @endforeach
{{-- Dot badges --}}

Dot Badge

@php $dotBadges = [ ['label' => 'Online', 'dot' => 'bg-success', 'txt' => 'text-success'], ['label' => 'Offline', 'dot' => 'bg-gray-400', 'txt' => 'text-secondary'], ['label' => 'Pending', 'dot' => 'bg-warning', 'txt' => 'text-warning'], ['label' => 'Error', 'dot' => 'bg-danger', 'txt' => 'text-danger'], ]; @endphp @foreach ($dotBadges as $b) {{ $b['label'] }} @endforeach
{{-- Count / number badges --}}

Count Badge (Notification)

3
{{-- Label badges --}}

Label Badge (Chip / Tag)

@php $chips = [ ['label' => 'KTP', 'class' => 'bg-gov-50 text-gov-primary dark:bg-gov-primary/10'], ['label' => 'KIA', 'class' => 'bg-blue-50 text-blue-600 dark:bg-blue-500/10'], ['label' => 'Pernikahan', 'class' => 'bg-purple-50 text-purple-600 dark:bg-purple-500/10'], ['label' => 'Tanah', 'class' => 'bg-amber-50 text-amber-600 dark:bg-amber-500/10'], ['label' => 'Rumah', 'class' => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10'], ['label' => 'KK', 'class' => 'bg-rose-50 text-rose-600 dark:bg-rose-500/10'], ]; @endphp @foreach ($chips as $chip) {{ $chip['label'] }} @endforeach
{{-- ═══════════════════════════════════════ CARDS ═══════════════════════════════════════ --}}

Cards

{{-- Plain card --}}

Plain Card

Judul Konten

Ini adalah card dasar menggunakan class .card.

{{-- Stat card --}}

Stat Card (x-cards.stat-card)

{{-- Card with header/footer --}}

Card dengan Header & Footer

Header Card

Konten utama card.

{{-- Card with icon --}}

Card Layanan

KTP Elektronik

Pembuatan & perpanjangan

3–5 hari kerja
{{-- Skeleton card --}}

Skeleton Loader (x-skeleton)

{{-- Empty state --}}

Empty State (x-empty-state)

{{-- ═══════════════════════════════════════ PROGRESS ═══════════════════════════════════════ --}}

Progress Bar

{{-- Default --}}
Upload Berkas 72%
{{-- Semantic colors --}} @php $bars = [ ['label' => 'Disetujui', 'val' => 60, 'color' => 'bg-success', 'pct' => 60], ['label' => 'Diproses', 'val' => 25, 'color' => 'bg-warning', 'pct' => 25], ['label' => 'Ditolak', 'val' => 15, 'color' => 'bg-danger', 'pct' => 15], ]; @endphp @foreach ($bars as $bar)
{{ $bar['label'] }} {{ $bar['val'] }}%
@endforeach {{-- Thick / labeled --}}

Progres Pengajuan (Step)

@foreach (['Dikirim', 'Verifikasi', 'Diproses', 'Selesai'] as $i => $step)

{{ $step }}

@endforeach
{{-- Alpine animated --}}
Animasi (Alpine)
{{-- ═══════════════════════════════════════ SPINNERS / LOADERS ═══════════════════════════════════════ --}}

Spinners & Loaders

{{-- Border spinner --}}

Border Spinner

@foreach (['h-4 w-4', 'h-6 w-6', 'h-8 w-8', 'h-12 w-12'] as $size) @endforeach
{{-- Semantic colors --}}

Spinner Warna

@foreach (['text-gov-primary', 'text-success', 'text-warning', 'text-danger', 'text-info'] as $color) @endforeach
{{-- Dot pulse --}}

Dot Pulse

@foreach ([0, 150, 300] as $delay) @endforeach
{{-- Skeleton rows --}}

Skeleton List

@foreach ([80, 65, 90] as $w)
@endforeach
{{-- Full-page overlay --}}

Full Overlay Loader (Preview Statis)

Memuat data...

@push('styles') @endpush