Advanced Button Group
Animated button group with sliding indicator and multiple states.
ReactTailwind CSSTypeScriptResponsiveButton
Live Preview
Interactive
Advanced Button Group.tsxLive Code
"use client";
import { useEffect, useState } from "react";
export default function AdvancedButtonGroup() {
const [active, setActive] = useState("all");
const [indicatorStyle, setIndicatorStyle] = useState({});
const buttons = [
{ id: "all", label: "All Items", count: 24 },
{ id: "active", label: "Active", count: 18 },
{ id: "pending", label: "Pending", count: 4 },
{ id: "inactive", label: "Inactive", count: 2 },
];
useEffect(() => {
const activeButton = document.querySelector(`[data-id="${active}"]`);
if (activeButton instanceof HTMLElement) {
const { offsetLeft, offsetWidth } = activeButton;
setIndicatorStyle({
left: offsetLeft,
width: offsetWidth,
});
}
}, [active]);
return (
<div className="relative bg-gray-100 p-1 rounded-xl inline-flex">
<div
className="absolute top-1 bottom-1 bg-white rounded-lg shadow-sm transition-all duration-300 ease-out"
style={indicatorStyle}
/>
{buttons.map((button) => (
<button
key={button.id}
data-id={button.id}
onClick={() => setActive(button.id)}
className={`relative z-10 px-4 py-2 text-sm font-medium transition-colors duration-200 rounded-lg ${
active === button.id
? "text-purple-600"
: "text-gray-600 hover:text-gray-900"
}`}
>
<span>{button.label}</span>
<span className="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">
{button.count}
</span>
</button>
))}
</div>
);
}
How to use
- 1. Copy the component code
- 2. Paste it into your React/Next.js project
- 3. Make sure you have Tailwind CSS configured
- 4. Customize colors, spacing, and content as needed
Dependencies
react
^18.0.0tailwindcss
^3.0.0Back to Components
Need complete templates?
View Premium Templates