{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-button-52","type":"registry:block","title":"Multi-line button with icon, title & description","description":"Multi-line button with icon, title & description","dependencies":[],"registryDependencies":["button"],"files":[{"path":"c-button-52.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <Button\n      variant=\"outline\"\n      className=\"group/button h-auto justify-start gap-3 px-4 py-3 text-left\"\n    >\n      <div className=\"bg-muted text-accent-foreground group-hover/button:bg-background rounded-md flex size-10 items-center justify-center\">\n        <IconPlaceholder\n          lucide=\"CreditCardIcon\"\n          tabler=\"IconCreditCard\"\n          hugeicons=\"CreditCardIcon\"\n          phosphor=\"CreditCardIcon\"\n          remixicon=\"RiBankCardLine\"\n          aria-hidden=\"true\"\n          className=\"size-5\"\n        />\n      </div>\n      <div className=\"flex flex-col gap-0.5\">\n        <span>Credit Card</span>\n        <span className=\"text-muted-foreground text-xs font-normal\">\n          Pay securely with your Visa or Mastercard\n        </span>\n      </div>\n    </Button>\n  )\n}","target":"components/examples/c-button-52.tsx"}],"meta":{"order":52}}