Tailwind CSS Button Group
Group a series of buttons together on a single line or stack them in a vertical column.
Example
<button
type="button"
class="btn rounded-e-none inline-flex items-center gap-x-2 -ms-px bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Left
</button>
<button
type="button"
class="btn rounded-none inline-flex items-center gap-x-2 -ms-px bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Middle
</button>
<button
type="button"
class="btn rounded-s-none inline-flex items-center gap-x-2 -ms-px bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Right
</button>Outline Button
<button
type="button"
class="btn rounded-e-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Left
</button>
<button
type="button"
class="btn rounded-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Middle
</button>
<button
type="button"
class="btn rounded-s-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Right
</button>Sizes Button
<button
type="button"
class="btn btn-sm rounded-e-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Left
</button>
<button
type="button"
class="btn btn-sm rounded-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Middle
</button>
<button
type="button"
class="btn btn-sm rounded-s-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Right
</button>
<button
type="button"
class="btn rounded-e-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Left
</button>
<button
type="button"
class="btn rounded-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Middle
</button>
<button
type="button"
class="btn rounded-s-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Right
</button>
<button
type="button"
class="btn btn-lg rounded-e-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Left
</button>
<button
type="button"
class="btn btn-lg rounded-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Middle
</button>
<button
type="button"
class="btn btn-lg rounded-s-none inline-flex items-center gap-x-2 -ms-px bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Right
</button>