Warna & Token

Token warna inti yang dipakai untuk latar, teks, dan pembatas di seluruh tema.

Token Semantik

Palet per Tema

Setiap tema memiliki latar dan warna aksen tersendiri. Ganti tema dari ikon di header.

Palet Utilitas

Skala warna utilitas dari Tailwind yang dipakai untuk status (info, sukses, peringatan, error).

Tipografi

Skala ukuran teks standar serta font Arab khusus untuk ayat Al-Qur'an.

Tombol

Matriks varian × warna. Pakai varian solid untuk aksi penting, subtle untuk aksi sekunder, outline untuk aksi paling rendah.

<Button variant="solid | subtle | outline"
        color="primary | secondary | success | warning | danger"
        size="sm | md | lg"
        disabled
        onClick={fn}>...</Button>

Tombol Ikon

Tombol bujur sangkar berukuran tetap untuk aksi cepat tanpa label. Wajib mengisi ariaLabel.

<IconButton variant="ghost | subtle | outline | solid"
            color="primary | secondary | success | warning | danger"
            size="xs | sm | md | lg"
            rounded="md | full"
            ariaLabel="…"
            onClick={fn}>
  <Icon size="sm" />
</IconButton>

Badge

Penanda status berukuran kecil. Mendukung matriks varian × warna yang sama dengan tombol.

<Badge variant="solid | subtle | outline"
       color="primary | secondary | success | warning | danger"
       size="sm | md | lg">label</Badge>

Chip / Pill

Pelabelan ringkas atau filter yang bisa dipilih. Mendukung varian warna dan keadaan aktif.

<Chip color="blue" size="md" active onClick={fn}>label</Chip>

Banner / Alert

Pesan inline untuk menyampaikan status atau peringatan. Berbeda dengan toast, banner menetap di tempat.

<Banner type="info | success | warn | error" title="..." dismissible>body</Banner>

Kontrol Form

Input, textarea, checkbox, dan radio dengan label dan pesan kesalahan yang konsisten.

<Input label="..." size="sm | md | lg" bind:value error="..." hint="..." />

<Textarea label="..." size="sm | md | lg" rows={4} bind:value />

<Checkbox label="..." bind:checked />

<Radio name="..." value="..." label="..." bind:group />

Collapsible

Wadah yang bisa dibuka-tutup untuk menyembunyikan detail.

<Collapsible title="..." open>content</Collapsible>

Bottom Sheet

Panel yang muncul dari bawah untuk aksi atau detail kontekstual.

<BottomSheet show={open} title="..." onClose={fn}>content</BottomSheet>

Toast

Notifikasi singkat di pojok atas. Mendukung info, sukses, peringatan, dan error.

toast.show({ message: '...', type: 'info | success | warn | error' })

Breadcrumb

Jejak navigasi hierarkis menuju halaman saat ini.

<Breadcrumb items={[{ text: '...', href: '/' }]} />

Kartu

Wadah konten dengan latar sekunder dan bayangan lembut.

Varian

Dengan Header & Footer

Padding

Komponen lama

CardShadow masih dipakai di banyak halaman dan kompatibel dengan tata letak yang ada.

<Card variant="filled | outline | elevated" padding="none | sm | md | lg" title="..." subtitle="...">
  body
  {#snippet header()}...{/snippet}
  {#snippet footer()}...{/snippet}
</Card>

Ikon

Kumpulan ikon SVG yang dipakai bersama. Semua ikon menerima prop ukuran.

<BookmarkIcon size="xs | sm | md | lg | xl" />