Button Group
Bundle buttons/links as a segmented control. Wrapper auto-zeros border-radius on the center child and collapses shared borders. Hover fills with soft tint on the wrapper, keeping the group visually light (improved v0.3.3). Orientation: horizontal (default) or vertical. No need to add class="join-item" to children (removed v0.3.3).
default orientation=horizontal — 3 つの button を横並びで結合、hover で soft tint
orientation=vertical — 縦並びで結合
with toggle state — Alpine.js で segmented control を構成 (active は primary fill + !important で hover override より上に出す)
選択中:
icon-only buttons — 正方形 icon button を束ねる (ツールバー風)
使い方
{{-- 最小 (orientation=horizontal がデフォルト、join-item は不要) --}}
<x-button-group>
<x-button appearance="outline" color="neutral">Left</x-button>
<x-button appearance="outline" color="neutral">Center</x-button>
<x-button appearance="outline" color="neutral">Right</x-button>
</x-button-group>
{{-- orientation=vertical で縦並び --}}
<x-button-group orientation="vertical">
<x-button appearance="outline" color="neutral">Top</x-button>
<x-button appearance="outline" color="neutral">Middle</x-button>
<x-button appearance="outline" color="neutral">Bottom</x-button>
</x-button-group>
{{-- segmented control (Alpine で active state を管理、active 側は !important で hover override より上) --}}
<div x-data="{ active: 'center' }">
<x-button-group>
<x-button appearance="outline" color="neutral"
x-bind:class="active === 'left' && '!bg-primary !text-primary-content !border-primary'"
x-on:click="active = 'left'">Left</x-button>
...
</x-button-group>
</div>
{{-- icon-only ツールバー --}}
<x-button-group>
<x-button class="w-10 h-10 !p-0" appearance="outline" color="neutral" aria-label="bold">
<x-i type="text-bold" variant="linear" class="w-4 h-4" />
</x-button>
...
</x-button-group>