{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"button-link","type":"registry:ui","title":"Button link","description":"A link that looks exactly like a button, for actions that go somewhere.","categories":["actions"],"dependencies":[],"registryDependencies":["https://ui.teamofsilicons.com/r/button.json"],"files":[{"path":"registry/components/button-link/button-link.tsx","type":"registry:component","target":"@components/silicon-ui/button-link/button-link.tsx","content":"/**\n * A link that looks exactly like a Button. Navigation is a link, never a button that pushes a route, so it opens in a new\n * tab, shows its address and works without JavaScript. No client code: it renders on the server as a plain <a>.\n *\n *   <ButtonLink href=\"/sign-in\">Sign in</ButtonLink>\n *   <ButtonLink href=\"/docs\" variant=\"secondary\" as={Link}>Read the docs</ButtonLink>\n *\n * Pass `as` to render your router's link (next/link, a wrapped React Router Link); it receives `href`, `className`,\n * `data-variant` and the other anchor props.\n */\nimport type { AnchorHTMLAttributes, ComponentType, ReactNode } from \"react\";\nimport buttonStyles from \"../button/button.module.css\";\nimport type { ButtonSize, ButtonVariant } from \"../button/button\";\nimport styles from \"./button-link.module.css\";\n\nexport interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  href: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** The element to render instead of <a>, such as next/link. */\n  as?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }>;\n  children: ReactNode;\n}\n\nexport function ButtonLink({ href, variant = \"primary\", size = \"md\", as: Anchor, className, children, ...props }: ButtonLinkProps) {\n  const classes = [buttonStyles.button, buttonStyles[variant], buttonStyles[size], styles.link, className].filter(Boolean).join(\" \");\n  const content = <span className={styles.content}>{children}</span>;\n  if (Anchor) return <Anchor {...props} href={href} data-variant={variant} className={classes}>{content}</Anchor>;\n  return <a {...props} href={href} data-variant={variant} className={classes}>{content}</a>;\n}\n\nexport default ButtonLink;\n"},{"path":"registry/components/button-link/button-link.module.css","type":"registry:component","target":"@components/silicon-ui/button-link/button-link.module.css","content":"/* Button's look on a link: no underline in any state, and a CSS press in place of Button's Motion press. */\n.link { text-decoration: none; transition-property: color, background, border-color, opacity, box-shadow, transform; }\n.link:hover { text-decoration: none; }\n.link:active { transform: scale(.97); transition-duration: var(--duration-instant); }\n.content { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-related); white-space: nowrap; }\n.content svg { flex: none; }\n@media (prefers-reduced-motion: reduce) { .link:active { transform: none; } }\n/* Button's link variant underlines the label, which is .content here. */\n.link[data-variant=\"link\"] .content { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--button-link-underline, var(--border-strong)); transition: text-decoration-color var(--duration-fast) var(--ease-standard); }\n@media (hover: hover) and (pointer: fine) { .link[data-variant=\"link\"]:hover .content { text-decoration-color: currentColor; } }\n.link[data-variant=\"link\"]:focus-visible .content, .link[data-variant=\"link\"]:active .content { text-decoration-color: currentColor; }\n"}],"docs":"Docs and live preview: https://ui.teamofsilicons.com/button-link","meta":{"tier":"free","kind":"component","docs":"https://ui.teamofsilicons.com/button-link","markdown":"https://ui.teamofsilicons.com/button-link.md","tags":["action","link","navigation"],"status":"stable","experimentalProps":{"ButtonLink":{"variant":["soft","link"]}}}}