buttonsBeginner

Segmented Button Group

A horizontal button group with shared borders for tab-like selection.

Live preview

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.io/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>