Button Group
Group a series of buttons together on a single line or stack them in a vertical column.
Basic example
A button group displays multiple buttons together.
<div class="inline-flex ">
<button
type="button"
class="btn gap-x-2 -ms-px rounded-r-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Left
</button>
<button
type="button"
class="btn gap-x-2 -ms-px rounded-r-none
rounded-l-none focus:z-10 border border-indigo-600 bg-indigo-600 text-white
shadow-sm hover:bg-indigo-800 disabled:opacity-50
disabled:pointer-events-none"
>
Middle
</button>
<button
type="button"
class="btn gap-x-2 -ms-px rounded-l-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Right
</button>
</div>Sizes
A button group displays multiple buttons together.
<div class="inline-flex mb-2">
<button
type="button"
class="btn btn-sm gap-x-2 -ms-px rounded-r-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Left
</button>
<button
type="button"
class="btn btn-sm gap-x-2 -ms-px rounded-r-none
rounded-l-none focus:z-10 border border-indigo-600 bg-indigo-600 text-white
shadow-sm hover:bg-indigo-800 disabled:opacity-50
disabled:pointer-events-none"
>
Middle
</button>
<button
type="button"
class="btn btn-sm gap-x-2 -ms-px rounded-l-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Right
</button>
</div>
<div class="inline-flex mb-2">
<button
type="button"
class="btn gap-x-2 -ms-px rounded-r-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Left
</button>
<button
type="button"
class="btn gap-x-2 -ms-px rounded-r-none
rounded-l-none focus:z-10 border border-indigo-600 bg-indigo-600 text-white
shadow-sm hover:bg-indigo-800 disabled:opacity-50
disabled:pointer-events-none"
>
Middle
</button>
<button
type="button"
class="btn gap-x-2 -ms-px rounded-l-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Right
</button>
</div>
<div class="inline-flex mb-2">
<button
type="button"
class="btn btn-lg gap-x-2 -ms-px rounded-r-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Left
</button>
<button
type="button"
class="btn btn-lg gap-x-2 -ms-px rounded-r-none
rounded-l-none focus:z-10 border border-indigo-600 bg-indigo-600 text-white
shadow-sm hover:bg-indigo-800 disabled:opacity-50
disabled:pointer-events-none"
>
Middle
</button>
<button
type="button"
class="btn btn-lg gap-x-2 -ms-px rounded-l-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
Right
</button>
</div>Verticle
A button group displays multiple buttons together.
<div class="max-w-xs flex flex-col ">
<button
type="button"
class="btn gap-x-2 rounded-b-none border
border-indigo-600 bg-indigo-600 text-white shadow-sm hover:bg-indigo-800
disabled:opacity-50 disabled:pointer-events-none"
>
Item 1
</button>
<button
type="button"
class="-mt-px btn gap-x-2 border rounded-none
border-indigo-600 bg-indigo-600 text-white shadow-sm hover:bg-indigo-800
disabled:opacity-50 disabled:pointer-events-none"
>
Item 2
</button>
<button
type="button"
class="-mt-px btn gap-x-2 rounded-t-none border
border-indigo-600 bg-indigo-600 text-white shadow-sm hover:bg-indigo-800
disabled:opacity-50 disabled:pointer-events-none"
>
Item 3
</button>
</div>Button Toolbar
Editor toolbar button group.
<div class="inline-flex">
<button
type="button"
class="btn gap-x-2 -ms-px rounded-r-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
1
</button>
<button
type="button"
class="btn gap-x-2 -ms-px rounded-r-none
rounded-l-none focus:z-10 border border-indigo-600 bg-indigo-600 text-white
shadow-sm hover:bg-indigo-800 disabled:opacity-50
disabled:pointer-events-none"
>
2
</button>
<button
type="button"
class="btn gap-x-2 -ms-px rounded-l-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
3
</button>
</div>
<div class="inline-flex">
<button
type="button"
class="btn gap-x-2 -ms-px rounded-r-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
4
</button>
<button
type="button"
class="btn gap-x-2 -ms-px rounded-l-none
focus:z-10 border border-indigo-600 bg-indigo-600 text-white shadow-sm
hover:bg-indigo-800 disabled:opacity-50 disabled:pointer-events-none"
>
5
</button>
</div>
<div class="inline-flex">
<button
type="button"
class="btn gap-x-2 -ms-px focus:z-10 border
border-indigo-600 bg-indigo-600 text-white shadow-sm hover:bg-indigo-800
disabled:opacity-50 disabled:pointer-events-none"
>
6
</button>
</div>