Command Button

1import { Command } from "lucide-react";
2import { Button } from "@/components/ui/button";
3import { cn } from "@/lib/utils";
4 
5/**
6 * @author: @dorianbaffier
7 * @description: Command Button
8 * @version: 1.0.0
9 * @date: 2025-06-26
10 * @license: MIT
11 * @website: https://kokonutui.com
12 * @github: https://github.com/kokonut-labs/kokonutui
13 */
14 
15export default function CommandButton({
16  className,
17  children,
18  ...props
19}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
20  children?: React.ReactNode;
21}) {
22  return (
23    <Button
24      {...props}
25      className={cn(
26        "relative p-2",
27        "overflow-hidden rounded-lg",
28        "bg-gradient-to-b from-zinc-50 to-zinc-100",
29        "dark:from-zinc-800 dark:to-zinc-900",
30        "border border-zinc-200 dark:border-zinc-800",
31        "hover:border-zinc-300 dark:hover:border-zinc-700",
32        "transition-all duration-300 ease-out",
33        "group",
34        "inline-flex items-center justify-center",
35        "gap-2",
36        className
37      )}
38    >
39      <Command
40        className={cn(
41          "h-4 w-4",
42          "text-zinc-600 dark:text-zinc-400",
43          "transition-all duration-300",
44          "group-hover:scale-110",
45          "group-hover:rotate-[-4deg]",
46          "group-active:scale-95"
47        )}
48      />
49      <span className="text-sm text-zinc-600 dark:text-zinc-400">
50        {children || "CMD + K"}
51      </span>
52      <span
53        className={cn(
54          "absolute inset-0",
55          "bg-gradient-to-r from-indigo-500/0 via-indigo-500/10 to-indigo-500/0",
56          "translate-x-[-100%]",
57          "group-hover:translate-x-[100%]",
58          "transition-transform duration-500",
59          "ease-out"
60        )}
61      />
62    </Button>
63  );
64}