{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-button",
  "title": "Floating button",
  "description": "floats OVER the scroll (a Button flows with it) · Material calls it a FAB · `icon label? variant position` · one per page",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/floating-button.tsx",
      "content": "import { cn } from 'cn';\nimport type { LucideIcon } from 'lucide-react';\nimport type * as React from 'react';\n\ntype Props = Omit<React.ComponentProps<'button'>, 'children'> & {\n  icon: LucideIcon;\n  /** Adds a label: an extended button instead of a square. Without one, pass `aria-label`. */\n  label?: string;\n  variant?: 'primary' | 'secondary';\n  /** `inline` renders in flow; the others pin to the corner or centre of the nearest positioned parent (`fixed` it yourself to pin to the viewport). */\n  position?: 'inline' | 'bottom-right' | 'bottom-center';\n};\n\n/**\n * A button that floats OVER the scroll rather than sitting in it, so a page's one most important action\n * stays reachable however far down you are: add, compose, new.\n *\n * Material calls this a FAB. Use an ordinary `Button` for anything that belongs in the content flow. One per page.\n */\nexport function FloatingButton({ icon: Icon, label, variant = 'primary', position = 'inline', className, type = 'button', ...props }: Props) {\n  return (\n    <button\n      type={type}\n      className={cn(\n        'focus-visible:ring-ring/50 inline-flex h-14 items-center justify-center gap-2 rounded-xl shadow-lg shadow-black/20 transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',\n        label ? 'px-5' : 'w-14',\n        variant === 'primary' ? 'bg-primary text-primary-foreground hover:bg-primary/90' : 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        position === 'bottom-right' && 'absolute right-5 bottom-6',\n        position === 'bottom-center' && 'absolute bottom-6 left-1/2 -translate-x-1/2',\n        className\n      )}\n      {...props}>\n      <Icon className=\"size-[22px]\" aria-hidden />\n      {label ? <span className=\"font-semibold\">{label}</span> : null}\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/floating-button.tsx"
    }
  ],
  "meta": {
    "exports": [
      "FloatingButton"
    ],
    "api": "<FloatingButton icon label? variant=\"primary|secondary\" position=\"inline|bottom-right|bottom-center\" aria-label? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "actions"
  ],
  "type": "registry:component"
}