Group a series of buttons together on a single line or stack them in a vertical column
Wrap a series of buttons with .button in .button-group
<div class="relative inline-flex flex-wrap">
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded-l shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">Home</button>
<button type="button" class="px-6 py-2 text-blue-500 transition-all duration-500 ease-in-out border-t border-b border-l border-blue-500 shadow-md hover:shadow-xl hover:bg-blue-500 hover:text-white">Profile</button>
<button type="button" class="px-6 py-2 text-blue-500 transition-all duration-500 ease-in-out border border-blue-500 rounded-r shadow-md hover:shadow-xl hover:bg-blue-500 hover:text-white">Message</button>
</div>
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
<div class="relative inline-flex mr-2">
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded-l shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">1</button>
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">2</button>
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">3</button>
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded-r shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">4</button>
</div>
<div class="relative inline-flex mr-2">
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded-l shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">5</button>
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">6</button>
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded-r shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">7</button>
</div>
<div class="relative inline-flex">
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">8</button>
</div>
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<div class="relative inline-flex flex-col">
<button type="button" class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded-t shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">Home</button>
<button type="button" class="px-6 py-2 text-blue-500 transition-all duration-500 ease-in-out border-b border-l border-r border-blue-500 shadow-md hover:shadow-xl hover:bg-blue-500 hover:text-white">Profile</button>
<button type="button" class="px-6 py-2 text-blue-500 transition-all duration-500 ease-in-out border-b border-l border-r border-blue-500 rounded-b shadow-md hover:shadow-xl hover:bg-blue-500 hover:text-white">Message</button>
</div>
<div class="relative inline-flex mr-6 mb-2" x-data="{count:2}">
<button x-on:click="count > 1 ?count--:count" class="relative block px-2 py-1 text-sm rounded-l text-blue-500 bg-white dark:bg-dark-card border-l border-t border-b border-blue-500 dark:hover:bg-primary-500 dark:hover:text-white hover:bg-blue-500 hover:text-white focus-blue-500">-</button>
<span class="relative block px-4 py-1 text-sm text-blue-500 bg-white dark:bg-dark-card dark:hover:bg-primary-500 dark:hover:text-white border-t border border-blue-500 focus:blue-500" x-text="count">2</span>
<button x-on:click="count++" class="relative block px-2 py-1 text-sm rounded-r text-blue-500 bg-white dark:bg-dark-card border-r border-t border-b border-blue-500 dark:hover:bg-primary-500 dark:hover:text-white hover:bg-blue-500 hover:text-white focus-blue-500">+</button>
</div>