Ghost Button

Transparent button with a subtle hover fill — used for low-emphasis actions that shouldn't compete with primary content.

Default — Ukuran & State Dasar

DaisyUI btn btn-ghost adalah implementasi lengkap: transparent default, hover fill dari theme, focus ring otomatis. Tidak perlu CSS tambahan.

Ukuran

States

Full Width

Icon — Icon-only & Icon + Label

Ghost button sangat umum dipakai sebagai tombol ikon (close, menu, more-options). Gunakan btn-circle untuk ikon tanpa teks, atau tambahkan label untuk ikon + teks.

Icon-only (btn-circle)

Icon + Label

Muted Text Variant

Untuk aksi benar-benar sekunder (misal: "Batalkan", "Lewati", "Nanti saja"), turunkan opacity teks lewat Tailwind text-base-content/50 tanpa CSS tambahan.

Teks Muted (opacity 50%)

Perbandingan Emphasis

Tiga level emphasis: primary → ghost → ghost muted. Mata pembaca mengikuti urutan ini secara alami.

Destructive Ghost Variant

Aksi destruktif (hapus, revoke, unsubscribe) yang tidak cukup penting untuk tombol merah solid. DaisyUI btn-ghost text-error hover:bg-error/10 — warna merah hanya muncul di hover, bukan saat idle.

Destructive (hover reveal)

Pola Konfirmasi Inline

Di Atas Surface Gelap

Ghost button bekerja di atas background gelap tanpa modifikasi — hover fill otomatis menyesuaikan theme. Untuk kontras lebih tinggi di atas foto/gradien gelap, tambahkan text-white hover:bg-white/15.

Dark solid

btn-ghost — no extra class

Image / gradient overlay

text-white hover:bg-white/15

Toggle — Aktif / Tidak Aktif

Ghost button sering dipakai sebagai toggle tunggal (like, bookmark, follow). Alpine mengelola state; kelas btn-active atau warna teks cukup untuk memberi feedback visual.

Like Toggle

Bookmark Toggle

Follow Toggle

Panduan Penggunaan

Resep umum

<!-- Default ghost -->
<button class="btn btn-ghost">
  Batalkan
</button>

<!-- Icon-only -->
<button class="btn btn-ghost btn-circle"
        aria-label="Tutup">
  <!-- svg -->
</button>

<!-- Destructive -->
<button class="btn btn-ghost
  text-error hover:bg-error/10">
  Hapus
</button>

Di atas gambar / gelap

<!-- Solid dark bg -->
<button class="btn btn-ghost">
  Batal
</button>

<!-- Foto / gradient -->
<button class="btn btn-ghost
  text-white hover:bg-white/15">
  Batal
</button>

Kapan pakai ghost button

Aksi sekunder di sebelah tombol primary
Aksi ikon (close, menu, more)
Toggle tunggal (like, bookmark)
Nav item inline
Jangan pakai sebagai satu-satunya CTA — terlalu tersembunyi