How to Create a Button Link in Shadcn UI with Next.js

In this tutorial, we’ll see how to use button Link using Next.js and Shadcn UI.

Before using the Button with Link in Next.js 13 with Shadcn UI, you need to install it by running npx shadcn-ui add button.

npx shadcn-ui@latest add button

1. Creating a Button as a Child Element with a Link in Next.js Using Shadcn UI.

import Link from "next/link"

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

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

2. Creating a Button Link in Next.js with Shadcn UI, Featuring Variants like Secondary, Destructive, and Outline.

import Link from "next/link"

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

export default function page() {
  return (
    <div className="space-x-6">
      <Button asChild>
        <Link href="/login">Login</Link>
      </Button>
      <Button asChild variant="secondary">
        <Link href="/login">Login</Link>
      </Button>
      <Button asChild variant="destructive">
        <Link href="/login">Login</Link>
      </Button>
      <Button asChild variant="outline">
        <Link href="/login">Login</Link>
      </Button>
    </div>
  )
}

3. You can use the buttonVariants helper to create a link that looks like a button.

import Link from "next/link";

import { buttonVariants } from "@/components/ui/button";

export default function page() {
  return (
    <div>
      <Link className={buttonVariants({ variant: "outline" })} href="/login">
        login
      </Link>
    </div>
  );
}

Aaronn