{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button", "title": "Button", "description": "A polished button with primary, secondary, and semantic variants.", "dependencies": [ "@radix-ui/react-slot", "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/motokoui/button.tsx", "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n [\n \"relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2\",\n \"overflow-hidden border-0 font-medium outline-none select-none\",\n \"transition-[transform,box-shadow,background-color,color,opacity] duration-200 ease-[cubic-bezier(0.2,0,0,1)]\",\n \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-[1.5px] after:transition-[opacity,border-color,box-shadow] after:duration-200 after:ease-[cubic-bezier(0.2,0,0,1)]\",\n \"active:scale-[0.99]\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n \"focus-visible:ring-2 focus-visible:ring-ring/50\",\n ].join(\" \"),\n {\n variants: {\n variant: {\n primary: [\n \"bg-linear-to-b from-[#2C2C2C] to-[#282828] fill-white text-white\",\n \"shadow-[inset_2px_0_8px_2px_rgba(248,248,248,0.2)]\",\n \"after:border-white/20 after:mask-[linear-gradient(to_top,transparent_0,black_100%)]\",\n \"hover:shadow-[inset_2px_0_8px_2px_rgba(248,248,248,0)] hover:after:opacity-40\",\n \"active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.35)] active:after:opacity-20\",\n \"dark:from-[#f7f7f7] dark:to-white dark:text-black dark:fill-black\",\n \"dark:shadow-[inset_2px_0_8px_2px_rgba(24,24,24,0.12)]\",\n \"dark:after:border-white/50 dark:after:shadow-[inset_2px_0_8px_2px_rgba(24,24,24,0.25)]\",\n \"dark:hover:after:opacity-0 dark:hover:shadow-[inset_2px_0_8px_2px_rgba(24,24,24,0)]\",\n \"dark:active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.12)]\",\n ].join(\" \"),\n secondary: [\n \"bg-linear-to-b from-[#F3F3F3] to-[#E8E8E7] fill-current text-foreground\",\n \"shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.75)]\",\n \"after:border-black/10 after:mask-[linear-gradient(to_top,transparent_0,black_100%)]\",\n \"hover:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0)] hover:after:opacity-40\",\n \"active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.1)] active:after:opacity-20\",\n \"dark:from-[#2A2A2A] dark:to-[#222222] dark:text-white\",\n \"dark:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.08)]\",\n \"dark:after:border-white/15\",\n \"dark:hover:after:opacity-0 dark:hover:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0)]\",\n \"dark:active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.35)]\",\n ].join(\" \"),\n outline: [\n \"bg-transparent fill-current text-foreground\",\n \"shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0)]\",\n \"after:border-black/15 after:opacity-100 after:mask-[linear-gradient(to_top,transparent_0,black_100%)]\",\n \"hover:bg-[#F4F4F4] hover:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.7)] hover:after:opacity-45\",\n \"active:bg-[#ECECEC] active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.08)] active:after:opacity-25\",\n \"dark:text-white dark:after:border-white/20\",\n \"dark:hover:bg-[#2A2A2A] dark:hover:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.06)] dark:hover:after:opacity-40\",\n \"dark:active:bg-[#222222] dark:active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.35)]\",\n ].join(\" \"),\n ghost: [\n \"bg-transparent fill-current text-foreground\",\n \"shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0)]\",\n \"after:border-black/10 after:opacity-0 after:mask-[linear-gradient(to_top,transparent_0,black_100%)]\",\n \"hover:bg-[#F3F3F3] hover:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.7)] hover:after:opacity-100\",\n \"active:bg-[#EBEBEB] active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.08)] active:after:opacity-40\",\n \"dark:text-white dark:after:border-white/12\",\n \"dark:hover:bg-[#2A2A2A] dark:hover:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.06)] dark:hover:after:opacity-100\",\n \"dark:active:bg-[#222222] dark:active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.35)]\",\n ].join(\" \"),\n destructive: [\n \"bg-linear-to-b from-[#E5484D] to-[#D1393E] fill-white text-white\",\n \"shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.22)]\",\n \"after:border-white/25 after:mask-[linear-gradient(to_top,transparent_0,black_100%)]\",\n \"hover:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0)] hover:after:opacity-40\",\n \"active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.28)] active:after:opacity-20\",\n \"dark:from-[#FF6369] dark:to-[#E5484D]\",\n \"dark:shadow-[inset_2px_0_8px_2px_rgba(255,255,255,0.18)]\",\n \"dark:hover:after:opacity-30\",\n \"dark:active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.35)]\",\n ].join(\" \"),\n link: [\n \"h-auto rounded-none bg-transparent p-0 text-foreground underline-offset-4\",\n \"shadow-none after:hidden\",\n \"hover:underline hover:opacity-80\",\n \"active:opacity-60 active:scale-100\",\n ].join(\" \"),\n default: [\n \"bg-linear-to-b from-[#2C2C2C] to-[#282828] fill-white text-white\",\n \"shadow-[inset_2px_0_8px_2px_rgba(248,248,248,0.2)]\",\n \"after:border-white/20 after:mask-[linear-gradient(to_top,transparent_0,black_100%)]\",\n \"hover:shadow-[inset_2px_0_8px_2px_rgba(248,248,248,0)] hover:after:opacity-40\",\n \"active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.35)] active:after:opacity-20\",\n \"dark:from-[#f7f7f7] dark:to-white dark:text-black dark:fill-black\",\n \"dark:shadow-[inset_2px_0_8px_2px_rgba(24,24,24,0.12)]\",\n \"dark:after:border-white/50 dark:after:shadow-[inset_2px_0_8px_2px_rgba(24,24,24,0.25)]\",\n \"dark:hover:after:opacity-0 dark:hover:shadow-[inset_2px_0_8px_2px_rgba(24,24,24,0)]\",\n \"dark:active:shadow-[inset_0_2px_6px_2px_rgba(0,0,0,0.12)]\",\n ].join(\" \"),\n },\n size: {\n default: \"h-12 rounded-3xl px-7 text-sm\",\n sm: \"h-10 rounded-3xl px-5 text-sm\",\n lg: \"h-14 rounded-3xl px-8 text-base\",\n icon: \"size-10 justify-center rounded-full p-0\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"default\",\n },\n }\n)\n\nexport type ButtonVariantProps = VariantProps\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes, ButtonVariantProps {\n asChild?: boolean\n isDisabled?: boolean\n}\n\nconst Button = React.forwardRef(\n (\n {\n className,\n variant = \"primary\",\n size = \"default\",\n asChild = false,\n isDisabled,\n onClick,\n type,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n", "type": "registry:ui", "target": "components/ui/button.tsx" } ], "type": "registry:ui" }