Button Groups
Ready to use Tailwind CSS button group components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Button groups are useful when you have a small set of related actions and want them visually connected, like a segmented control, a toolbar, or pagination controls. We have a few variations: simple grouped buttons with shared borders, icon-only groups, mixed icon-and-text, and some with a divider between options. They're the kind of component that's a bit annoying to build from scratch but pretty quick to drop in and adapt.
Tailwind
<span class="inline-flex -space-x-px rounded-lg shadow-sm">
<button type="button" class="rounded-l-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Day</button>
<button type="button" class="bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Week</button>
<button type="button" class="bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Month</button>
<button type="button" class="rounded-r-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Year</button>
</span><span class="inline-flex -space-x-px rounded-lg shadow-sm">
<button type="button" class="flex items-center gap-x-2 rounded-l-lg bg-white py-2.5 pl-3.5 pr-4 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2 3L22 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M7.5 7C6.56538 7 6.09808 7 5.75 7.20096C5.52197 7.33261 5.33261 7.52197 5.20096 7.75C5 8.09808 5 8.56538 5 9.5L5 18.5C5 19.4346 5 19.9019 5.20096 20.25C5.33261 20.478 5.52197 20.6674 5.75 20.799C6.09808 21 6.56538 21 7.5 21C8.43462 21 8.90192 21 9.25 20.799C9.47803 20.6674 9.66739 20.478 9.79904 20.25C10 19.9019 10 19.4346 10 18.5L10 9.5C10 8.56538 10 8.09808 9.79904 7.75C9.66739 7.52197 9.47803 7.33261 9.25 7.20096C8.90192 7 8.43462 7 7.5 7Z" stroke="currentColor" stroke-width="2" />
<path d="M16.5 7C15.5654 7 15.0981 7 14.75 7.20096C14.522 7.33261 14.3326 7.52197 14.201 7.75C14 8.09808 14 8.56538 14 9.5L14 15.5C14 16.4346 14 16.9019 14.201 17.25C14.3326 17.478 14.522 17.6674 14.75 17.799C15.0981 18 15.5654 18 16.5 18C17.4346 18 17.9019 18 18.25 17.799C18.478 17.6674 18.6674 17.478 18.799 17.25C19 16.9019 19 16.4346 19 15.5L19 9.5C19 8.56538 19 8.09808 18.799 7.75C18.6674 7.52197 18.478 7.33261 18.25 7.20096C17.9019 7 17.4346 7 16.5 7Z" stroke="currentColor" stroke-width="2" />
</svg>
Top
</button>
<button type="button" class="flex items-center gap-x-2 bg-white py-2.5 pl-3.5 pr-4 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2 12L5 12M22 12L19 12M14 12L10 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M7.5 5C6.56538 5 6.09808 5 5.75 5.20096C5.52197 5.33261 5.33261 5.52197 5.20096 5.75C5 6.09808 5 6.56538 5 7.5L5 16.5C5 17.4346 5 17.9019 5.20096 18.25C5.33261 18.478 5.52197 18.6674 5.75 18.799C6.09808 19 6.56538 19 7.5 19C8.43462 19 8.90192 19 9.25 18.799C9.47803 18.6674 9.66739 18.478 9.79904 18.25C10 17.9019 10 17.4346 10 16.5L10 7.5C10 6.56538 10 6.09808 9.79904 5.75C9.66739 5.52197 9.47803 5.33261 9.25 5.20096C8.90192 5 8.43462 5 7.5 5Z" stroke="currentColor" stroke-width="2" />
<path d="M16.5 7C15.5654 7 15.0981 7 14.75 7.20096C14.522 7.33261 14.3326 7.52197 14.201 7.75C14 8.09808 14 8.56538 14 9.5L14 14.5C14 15.4346 14 15.9019 14.201 16.25C14.3326 16.478 14.522 16.6674 14.75 16.799C15.0981 17 15.5654 17 16.5 17C17.4346 17 17.9019 17 18.25 16.799C18.478 16.6674 18.6674 16.478 18.799 16.25C19 15.9019 19 15.4346 19 14.5V9.5C19 8.56538 19 8.09808 18.799 7.75C18.6674 7.52197 18.478 7.33261 18.25 7.20096C17.9019 7 17.4346 7 16.5 7Z" stroke="currentColor" stroke-width="2" />
</svg>
Center
</button>
<button type="button" class="flex items-center gap-x-2 rounded-r-lg bg-white py-2.5 pl-3.5 pr-4 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2 21L22 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M7.5 17C6.56538 17 6.09808 17 5.75 16.799C5.52197 16.6674 5.33261 16.478 5.20096 16.25C5 15.9019 5 15.4346 5 14.5L5 5.5C5 4.56538 5 4.09808 5.20096 3.75C5.33261 3.52197 5.52197 3.33261 5.75 3.20096C6.09808 3 6.56538 3 7.5 3C8.43462 3 8.90192 3 9.25 3.20096C9.47803 3.33261 9.66739 3.52197 9.79904 3.75C10 4.09808 10 4.56538 10 5.5L10 14.5C10 15.4346 10 15.9019 9.79904 16.25C9.66739 16.478 9.47803 16.6674 9.25 16.799C8.90192 17 8.43462 17 7.5 17Z" stroke="currentColor" stroke-width="2" />
<path d="M16.5 17C15.5654 17 15.0981 17 14.75 16.799C14.522 16.6674 14.3326 16.478 14.201 16.25C14 15.9019 14 15.4346 14 14.5L14 8.5C14 7.56538 14 7.09808 14.201 6.75C14.3326 6.52197 14.522 6.33261 14.75 6.20096C15.0981 6 15.5654 6 16.5 6C17.4346 6 17.9019 6 18.25 6.20096C18.478 6.33261 18.6674 6.52197 18.799 6.75C19 7.09808 19 7.56538 19 8.5L19 14.5C19 15.4346 19 15.9019 18.799 16.25C18.6674 16.478 18.478 16.6674 18.25 16.799C17.9019 17 17.4346 17 16.5 17Z" stroke="currentColor" stroke-width="2" />
</svg>
Bottom
</button>
</span><span class="inline-flex -space-x-px rounded-lg shadow-sm">
<button type="button" class="rounded-l-lg bg-white px-3 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<span class="sr-only">Align left</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 18H14M4 14H20M4 10H14M4 6H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="bg-white px-3 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<span class="sr-only">Align center</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M17 18H7M20 14H4M17 10H7M20 6H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="bg-white px-3 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<span class="sr-only">Align right</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M20 18H10M20 14H4M20 10H10M20 6H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="rounded-r-lg bg-white px-3 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<span class="sr-only">Align justify</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M20 18H4M20 14H4M20 10H4M20 6H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</span><div class="inline-flex -space-x-px rounded-lg shadow-sm">
<button type="button" class="rounded-l-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Send message</button>
<div class="relative">
<button type="button" aria-haspopup="menu" aria-expanded="true" aria-controls="menu-items" id="menu-button" class="rounded-r-lg bg-white px-2.5 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<span class="sr-only">Open options</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div role="menu" id="menu-items" aria-labelledby="menu-button" class="absolute right-0 -mr-1 mt-2 flex w-52 flex-col overflow-hidden rounded-lg py-1 shadow-lg ring-1 ring-inset ring-gray-900/5">
<a href="#" class="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none">Attach file</a>
<a href="#" class="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none">Schedule message</a>
<a href="#" class="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none">Save as draft</a>
</div>
</div>
</div>const menuButton = document.getElementById("menu-button");
const menuItems = document.getElementById("menu-items");
// Hide the menu items on load
if (menuItems) {
// menuItems.classList.add("hidden");
// menuButton.setAttribute("aria-expanded", false);
}
// Toggle dropdown menu visibility on button click
menuButton?.addEventListener("click", (event) => {
event.stopPropagation(); // Prevent click from propagating to the document
const isExpanded = menuButton.getAttribute("aria-expanded") === "true";
menuButton.setAttribute("aria-expanded", !isExpanded);
menuItems?.classList.toggle("hidden");
});
// Close the dropdown when clicking outside of it
document.addEventListener("click", (event) => {
if (menuItems && !menuItems.classList.contains("hidden") && !menuItems.contains(event.target)) {
menuItems.classList.add("hidden");
menuButton.setAttribute("aria-expanded", "false");
}
});
// Close dropdown on Escape key press
document.addEventListener("keydown", (event) => {
if (event.key === "Escape" && menuItems && !menuItems.classList.contains("hidden")) {
menuItems.classList.add("hidden");
menuButton.setAttribute("aria-expanded", "false");
}
});Frequently asked questions
-
Grouped text buttons, icon-only groups, mixed icon and text, and some with a vertical divider between options. Horizontal layout across the board.
-
They work well for that kind of thing. The layouts are pure HTML and CSS so there's no switching behavior built in, you'd wire up the active state with a bit of your own JavaScript.
-
Yes, just add more button elements. The rounded corners are set with explicit classes though, rounded-l-lg on the first button and rounded-r-lg on the last, so you'll need to move those manually when you add or remove buttons.
-
One variant has a dropdown menu attached to the button. The vanilla JavaScript for opening and closing that dropdown is already included in the component snippet.
-
They're horizontal by design. On very small screens they might feel tight, you might want to switch to a stacked or full-width layout at that point.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.