Components
Loading preview...
The Button with Embedded Icon Grid is a shadcn/ui component designed for compact action menus or mini pickers, like emoji selectors or quick actions. When clicked, the button opens a grid of icons, each representing a distinct action that can be executed individually. The component supports configurable sizes (sm, md, lg) and ensures the grid closes automatically when clicking outside, maintaining a clean interface. Its design leverages shadcn/ui primitives for accessibility and consistent styling, making it highly reusable, visually appealing, and practical for dashboards, messaging interfaces, or any interface requiring quick, icon-based actions.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/icon-grid-buttonimport IconGridButton from "@/components/ui/icon-grid-button";
import { MonitorDown, Settings, Star, Heart } from "lucide-react";
export default function DemoIconGridButton() {
const icons = [
{ icon: <MonitorDown className="w-5 h-5" />, onClick: () => alert('MonitorDown clicked') },
{ icon: <Star className="w-5 h-5" />, onClick: () => alert('Star clicked') },
{ icon: <Heart className="w-5 h-5" />, onClick: () => alert('Heart clicked') },
{ icon: <Settings className="w-5 h-5" />, onClick: () => alert('Settings clicked') },
];
return (
<div className="flex gap-4">
<IconGridButton label="Quick Actions" icons={icons} />
</div>
);
}