Button Group
A free button group for React and Tailwind CSS — perfect for segmented controls, toolbars and grouped actions with shared borders and clear active states. Copy, paste, done.
Copy the code
export function ButtonGroup() {
const items = ['Day', 'Week', 'Month']
const [active, setActive] = React.useState('Week')
return (
<div className="inline-flex overflow-hidden rounded-xl border border-white/15">
{items.map(i => (
<button key={i} onClick={() => setActive(i)}
className={`px-4 py-2 text-sm font-semibold transition ${
active === i ? 'bg-violet-600 text-white' : 'text-white/70 hover:bg-white/5'}`}>
{i}
</button>
))}
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the button group
This button group is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.