buttonsBeginner
Segmented Button Group
A horizontal button group with shared borders for tab-like selection.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a segmented button group with Tailwind: 3-4 buttons that share their borders to look like one connected control. Hover state lightens the background; the 'selected' button gets a darker fill and white text. Useful for view-mode toggles (List / Grid / Calendar).
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/button-groups/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-button-group
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="flex justify-center p-6 w-full">
<div class="inline-flex">
<button
class="rounded-s-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
>
View
</button>
<button
class="-ms-px border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
>
Edit
</button>
<button
class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
>
Delete
</button>
</div>
</div>
</div>