Button Group

															
<div class="btn-group relative inline-flex align-middle rounded-xl">
	<button type="button" class="btn bg-primary hover:bg-primary focus:bg-primary focus:shadow-btnprimary text-white">Left</button>
	<button type="button" class="btn bg-primary hover:bg-primary focus:bg-primary focus:shadow-btnprimary text-white">Middle</button>
	<button type="button" class="btn bg-primary hover:bg-primary focus:bg-primary focus:shadow-btnprimary text-white">Right</button>
</div>
															
														

															
<div class="btn-group relative inline-flex align-middle rounded-xl">
	<button type="button" class="btn bg-danger focus:bg-danger/90 focus:shadow-btndanger text-white">Left</button>
	<button type="button" class="btn bg-warning focus:bg-warning/90 focus:shadow-btnwarning text-white">Middle</button>
	<button type="button" class="btn bg-success hover:bg-success/90 hover:shadow-btnsuccess focus:bg-success/90 focus:shadow-btnsuccess text-white">Right</button>
</div>
															
														

															
<div class="btn-group relative inline-flex align-middle rounded-xl">
	<button type="button" class="btn border border-primary! first:border-r-0! last:border-l-0! text-primary hover:bg-primary hover:text-white">Left</button>
	<button type="button" class="btn border border-primary! first:border-r-0! last:border-l-0! text-primary hover:bg-primary hover:text-white">Middle</button>
	<button type="button" class="btn border border-primary! first:border-r-0! last:border-l-0! text-primary hover:bg-primary hover:text-white">Right</button>
</div>
															
														

															
<div class="btn-group relative inline-flex align-middle rounded-xl">
	<input type="checkbox" class="btn-check" id="btncheck1">
	<label class="btn border border-primary! rounded-s-lg! border-r-0! last:border-l-0! text-primary btn-primary-outline" for="btncheck1">Checkbox 1</label>
	
	<input type="checkbox" class="btn-check" id="btncheck2">
	<label class="btn border border-primary! last:border-l-0! text-primary btn-primary-outline" for="btncheck2">Checkbox 2</label>
	
	<input type="checkbox" class="btn-check" id="btncheck3">
	<label class="btn border border-primary! last:border-l-0! text-primary btn-primary-outline" for="btncheck3">Checkbox 3</label>
</div>
															
														

															
<div class="btn-group relative inline-flex align-middle rounded-xl">
	<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
	<label class="btn border border-primary! rounded-s-lg! border-r-0! last:border-l-0! text-primary btn-primary-outline" for="btnradio1">Radio 1</label>
	
	<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
	<label class="btn border border-primary! last:border-l-0! text-primary btn-primary-outline" for="btnradio2">Radio 2</label>
	
	<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
	<label class="btn border border-primary! last:border-l-0! text-primary btn-primary-outline" for="btnradio3">Radio 3</label>
</div>
															
														

															
<div class="btn-group relative inline-flex align-middle rounded-xl me-2 mb-2">
	<button type="button" class="btn btn-primary">1</button>
	<button type="button" class="btn btn-primary">2</button>
	<button type="button" class="btn btn-primary">3</button>
	<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl me-2 mb-2">
	<button type="button" class="btn btn-primary">5</button>
	<button type="button" class="btn btn-primary">6</button>
	<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-2">
	<button type="button" class="btn btn-primary rounded-xl!">8</button>
</div>
															
														

															
<div class="btn-group relative inline-flex align-middle rounded-xl mb-2 btn-group-lg">
	<button class="btn btn-primary" type="button">Left</button>
	<button class="btn btn-primary" type="button">Middle</button>
	<button class="btn btn-primary" type="button">Right</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-2">
	<button class="btn btn-primary" type="button">Left</button>
	<button class="btn btn-primary" type="button">Middle</button>
	<button class="btn btn-primary" type="button">Right</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-2 btn-group-sm">
	<button class="btn btn-primary" type="button">Left</button>
	<button class="btn btn-primary" type="button">Middle</button>
	<button class="btn btn-primary" type="button">Right</button>
</div>
															
														

															
<div class="btn-group relative inline-flex align-middle rounded-xl">
	<button type="button" class="btn btn-primary">1</button>
	<button type="button" class="btn btn-primary">2</button>
	<div class="btn-group relative inline-flex align-middle rounded-xl" x-data="{ open: false }">
		<button type="button" class="btn btn-primary rounded-s-none! rounded-e-lg! dropdown-toggle" @click="open = true">Dropdown</button>
		<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
		x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		</div>
	</div>
</div>
															
														

															
<div class="relative inline-flex flex-col items-start justify-center btn-group-vertical">
	<button class="btn btn-primary" type="button">Button</button>
	<button class="btn btn-primary" type="button">Button</button>
	<button class="btn btn-primary" type="button">Button</button>
	<button class="btn btn-primary" type="button">Button</button>
	<button class="btn btn-primary" type="button">Button</button>
	<button class="btn btn-primary" type="button">Button</button>
</div>
															
														

															
<div role="group" class="relative inline-flex flex-col items-start justify-center btn-group-vertical">
	<button class="btn btn-primary w-full" type="button">Button</button>
	<button class="btn btn-primary w-full" type="button">Button</button>
	<div role="group" class="btn-group relative inline-flex align-middle rounded-xl" x-data="{ open: false }">
		<button @click="open = true" class="btn btn-primary w-full rounded-none! dropdown-toggle" type="button">Dropdown</button>
		<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
			x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		</div>
	</div>
	<button class="btn btn-primary w-full" type="button">Button</button>
	<button class="btn btn-primary w-full" type="button">Button</button>
	<div role="group" class="btn-group relative inline-flex align-middle rounded-xl" x-data="{ open: false }">
		<button @click="open = true" class="btn btn-primary w-full rounded-none! dropdown-toggle" type="button">Dropdown</button>
		<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
			x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		</div>
	</div>
	<div role="group" class="btn-group relative inline-flex align-middle rounded-xl" x-data="{ open: false }">
		<button @click="open = true" class="btn btn-primary w-full rounded-none! dropdown-toggle" type="button">Dropdown</button>
		<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
			x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		</div>
	</div>
	<div role="group" class="btn-group relative inline-flex align-middle rounded-xl" x-data="{ open: false }">
		<button @click="open = true" class="btn btn-primary w-full rounded-t-none! rounded-b-lg! dropdown-toggle" type="button">Dropdown</button>
		<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
			x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
			<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		</div>
	</div>
</div>