{
  "schemaVersion": 1,
  "name": "button",
  "useFor": "Use one primary action per section. Pair it with secondary (Get started, then Read the docs); ghost in toolbars; on-brand only on a rare blue band. Wire an onClick handler, use type=\"submit\" for forms, or use asChild with a link for navigation.",
  "constraints": [
    "Rounded pill buttons",
    "Bold labels",
    "Two blue keys side by side for equal actions",
    "A gradient or glow on a key",
    "A drop shadow under a key",
    "A key that sinks or lifts on press"
  ],
  "documentation": "",
  "source": "opencommerce-agentcard-web src/app/globals.css (.btn, .btn-primary, .btn-secondary, .nav-cta)",
  "exports": [
    "Button",
    "buttonVariants"
  ],
  "client": false,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/button",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/button.md",
  "examples": [
    {
      "path": "examples/button.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\n\nexport function Site() {\n  return (\n    <div className=\"grid gap-6\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button asChild><a href=\"#get-started\">Get started</a></Button>\n        <Button variant=\"secondary\" asChild><a href=\"#docs\">Read the docs</a></Button>\n        <Button variant=\"ghost\" asChild><a href=\"#pricing\">See pricing</a></Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" className=\"rounded-sm\" asChild><a href=\"#get-started\">Get started</a></Button>\n        <Button size=\"sm\" variant=\"secondary\" asChild><a href=\"#book\">Book a call</a></Button>\n        <Button disabled>Processing</Button>\n      </div>\n    </div>\n  );\n}\n",
      "exports": [
        "Site"
      ],
      "requires": [
        "button"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/button/Site"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Button",
  "description": "Flat keys for primary, secondary and toolbar actions.",
  "surface": "site",
  "kinds": [
    "button-primary",
    "button-secondary",
    "button-on-brand",
    "header-action"
  ],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/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\n// The brand's keys (globals.css .btn, .btn-primary, .btn-secondary, .nav-cta; computed): flat, 8px corners, a border a\n// shade darker than the fill and no shadow; 15px Inter at 500. `primary` is the blue key (#2E3AE8, its edge the blue\n// mixed toward ink) that lifts toward white under the pointer; `secondary` the white key on the hairline that takes the\n// mist; `on-brand` the white key with blue text for the rare blue band; `ghost` a bare label that washes on hover. A\n// press shrinks a key to 0.97 (no sinking). Colors ease in 160ms, the press in the same strong ease-out.\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans font-medium leading-none outline-none select-none transition-[background-color,border-color,color,scale] duration-160 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring active:scale-97 disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-[background-color,border-color,color] motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        primary: \"border-line-brand-edge bg-primary text-on-primary hover:bg-primary-hover\",\n        secondary: \"border-hairline bg-surface text-fg hover:bg-subtle\",\n        \"on-brand\": \"border-hairline bg-white text-fg-brand hover:bg-subtle\",\n        ghost: \"border-transparent text-fg-muted hover:bg-wash-hover hover:text-fg data-[state=open]:bg-wash-hover data-[state=open]:text-fg\",\n      },\n      size: {\n        // The page's key: 40px, 18px of padding, 15px Inter.\n        md: \"h-10 px-4.5 text-button leading-body\",\n        // The small key: 34px, 14px of padding, 14px. The header's Get started is sm with 6px corners (rounded-sm).\n        sm: \"h-8.5 px-3.5 text-body-sm\",\n        icon: \"size-8 px-0 [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: { variant: \"primary\", size: \"md\" },\n  },\n);\n\ntype ButtonProps = React.ComponentProps<\"button\"> & VariantProps<typeof buttonVariants> & { asChild?: boolean };\n\nfunction Button({ className, variant, size, asChild = false, type, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot : \"button\";\n  return <Comp data-slot=\"button\" type={asChild ? type : (type ?? \"button\")} className={cn(buttonVariants({ variant, size, className }))} {...props} />;\n}\n\nexport { Button, buttonVariants };\n"
    }
  ]
}