shadcn/uiでLinkButtonを作成する

Buttonな見た目でLinkの動作をさせたいって時はこんな感じで実装すると思います。

以下公式より引用

import Link from "next/link"

import { Button } from "@/components/ui/button"

export function ButtonAsChild() {
  return (
    <Button asChild>
      <Link href="/login">Login</Link>
    </Button>
  )
}

でもこれだとdisableが効かないことに気づきました。 非常に困った。

なので、Buttonな見た目を維持したままLinkButtonを作ることにしました。

type Props = {
  children: ReactNode;
  href: string;
  disabled?: boolean;
} & VariantProps<typeof buttonVariants>

export function LinkButton({children, href, disabled, size, variant}: Props) {
  return (
    <Link
      className{cn(
        buttonVariants({ size, variant }),
        'cursor-pointer',
        disabled && 'pointer-events-none opacity-50'
      )}
      href={href}
    >
      {children}
    </Link>
  )

}

ポイントはbuttonVariants、これのおかげでButtonな見た目になります。

参考

Button - shadcn/ui