Button Group

Horizontal — Joined

DaisyUI .join menyatukan tombol secara visual tanpa border ganda. Gunakan untuk aksi yang berkaitan erat — misalnya Bold / Italic / Underline atau Copy / Cut / Paste.

Toggle Group — Radio Behavior

Satu item aktif pada satu waktu. Alpine.js mengelola state active — tidak ada JS kustom, tidak ada class toggle manual.

Vertikal — Joined Column

Tambahkan join-vertical pada container untuk mode kolom. Berguna untuk menu samping atau toolbar vertikal.

Icon + Teks

Kombinasi tombol ikon dan tombol teks dalam satu grup. Gunakan ukuran ikon yang konsisten (14–16px) agar baseline teks dan ikon sejajar.

States

Overflow — Scrollable

Pada container sempit (mobile, panel), bungkus grup dengan overflow-x-auto agar dapat di-scroll horizontal. Scroll indicator ditampilkan via fade gradient — CSS only, tidak butuh JS.

Panduan Penggunaan

<div class="join">
  <button class="btn join-item">A</button>
  <button class="btn join-item">B</button>
</div>

<div class="join join-vertical">
  <button class="btn join-item">A</button>
  <button class="btn join-item">B</button>
</div>

x-data="{ active: 'a' }"

:class="active==='a'
  ? 'btn-primary' : ''"
@click="active = 'a'"