{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Button",
  "description": "An accessible React button for Next.js and Tailwind CSS with six variants, three sizes, icons and a soft tint on hover and press, built on a native button.",
  "author": "FewTone <https://fewtone.com>",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.7.0"
  ],
  "registryDependencies": [
    "https://ui.fewtone.com/r/tokens.json"
  ],
  "files": [
    {
      "path": "registry/fewtone/ui/button.tsx",
      "type": "registry:ui",
      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentProps } from \"react\";\n\nconst buttonVariants = cva(\n  [\n    \"relative isolate inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg text-sm font-medium whitespace-nowrap\",\n    \"transition duration-(--duration-base) ease-out\",\n    // Hover and press, for every variant (owner, 2026-10-14: simple, no glow, shadow or scale): one tint layer\n    // in the text's own colour, behind the label. It fades in while rising 4px from the bottom, and deepens\n    // while pressed. The button itself never moves.\n    \"before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:translate-y-1 before:bg-current before:opacity-0 before:transition before:duration-(--duration-base) before:ease-out\",\n    \"hover:before:translate-y-0 hover:before:opacity-10 active:before:opacity-15 active:before:duration-(--duration-instant)\",\n    \"outline-ring focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset)\",\n    \"disabled:pointer-events-none disabled:opacity-(--opacity-disabled)\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--size-icon-md)\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground\",\n        outline: \"border border-input bg-background\",\n        ghost: \"\",\n        destructive: \"bg-destructive text-destructive-foreground outline-destructive\",\n        // No tint box for a link: its underline fades in instead\n        link: \"text-primary underline decoration-transparent underline-offset-4 before:hidden hover:decoration-current\",\n      },\n      size: {\n        sm: \"h-(--size-control-sm) gap-1.5 rounded-md px-3\",\n        md: \"h-(--size-control-md) px-4\",\n        lg: \"h-(--size-control-lg) px-5\",\n        icon: \"size-(--size-control-md)\",\n        \"icon-sm\": \"size-(--size-control-sm) rounded-md\",\n        \"icon-lg\": \"size-(--size-control-lg)\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n);\n\nexport type ButtonProps = ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    /** Render the single child instead of a button, for example a link, keeping the button styles */\n    asChild?: boolean;\n  };\n\n/**\n * A button for actions. It renders a native `button` (type \"button\" unless you set one), or with\n * `asChild` its single child, so a link can look like a button without nesting interactive elements.\n */\nfunction Button({ className, variant, size, asChild = false, type, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant ?? \"default\"}\n      data-size={size ?? \"md\"}\n      type={asChild ? undefined : (type ?? \"button\")}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"
    }
  ],
  "categories": [
    "buttons"
  ],
  "docs": "Usage and examples: https://ui.fewtone.com/components/button"
}