Floating Action Button

Elevated circular button anchored to the viewport for the screen's primary action.

Single Action — Ukuran

FAB standar menggunakan btn btn-circle dari DaisyUI. Ukuran md (default, 48px) adalah pilihan utama — gunakan lg hanya untuk aksi yang benar-benar dominan.

sm · 32px

md · 48px ✦ default

lg · 64px

neutral

secondary

Posisi — Bottom-right (simulasi viewport)

Dalam produksi gunakan fixed bottom-6 right-6 z-[var(--z-fixed)]. Di bawah ini disimulasikan dalam frame relatif.

Light

Konten halaman…

Dark

Konten halaman…

Speed Dial — Expand ke Beberapa Aksi

Satu FAB utama membuka beberapa aksi sekunder. Alpine.js mengatur state open. Animasi stagger dikendalikan lewat CSS custom property per-item agar tidak perlu JS manual per elemen.

Dengan Badge Count

Badge notifikasi di pojok kanan-atas FAB. Posisi absolute mengacu pada wrapper relative.

pesan baru

99+

high count

klik untuk tambah

Scroll-hide — Sembunyikan saat Scroll Turun

FAB tersembunyi saat pengguna scroll ke bawah (menunjukkan sedang browsing) dan muncul kembali saat scroll ke atas (siap untuk aksi). Alpine.js melacak lastY vs currentY — scroll di dalam frame simulasi di bawah.

Item #1 — scroll ke bawah untuk menyembunyikan FAB

Item #2 — scroll ke bawah untuk menyembunyikan FAB

Item #3 — scroll ke bawah untuk menyembunyikan FAB

Item #4 — scroll ke bawah untuk menyembunyikan FAB

Item #5 — scroll ke bawah untuk menyembunyikan FAB

Item #6 — scroll ke bawah untuk menyembunyikan FAB

Item #7 — scroll ke bawah untuk menyembunyikan FAB

Item #8 — scroll ke bawah untuk menyembunyikan FAB

Item #9 — scroll ke bawah untuk menyembunyikan FAB

Item #10 — scroll ke bawah untuk menyembunyikan FAB

Item #11 — scroll ke bawah untuk menyembunyikan FAB

Item #12 — scroll ke bawah untuk menyembunyikan FAB

Item #13 — scroll ke bawah untuk menyembunyikan FAB

Item #14 — scroll ke bawah untuk menyembunyikan FAB

Item #15 — scroll ke bawah untuk menyembunyikan FAB

Item #16 — scroll ke bawah untuk menyembunyikan FAB

Panduan Penggunaan

Posisi fixed (produksi)

<button class="btn btn-primary btn-circle
    fixed bottom-6 right-6
    z-[var(--z-fixed)]">
  <!-- icon -->
</button>

Scroll-hide Alpine

x-data="{
  visible: true, lastY: 0
}"
@scroll.window="
  visible = scrollY < lastY
    || scrollY < 40;
  lastY = scrollY
"
:class="visible
  ? 'opacity-100 scale-100'
  : 'opacity-0 scale-75
     pointer-events-none'"

Kapan pakai FAB

Aksi paling utama di layar (1 per layar)
Buat baru, compose, tambah item
Jangan pakai untuk navigasi atau destructive action
Mobile: bottom-right; Desktop: bottom-right juga cukup

Aksesibilitas

Selalu sertakan aria-label yang deskriptif karena FAB hanya menampilkan ikon. Untuk speed dial, tambahkan aria-expanded pada tombol utama dan aria-haspopup="true".