DEV Community

Cover image for How to Use Shadcn UI with Next.js for Button Link
Aaronn
Aaronn

Posted on • Originally published at frontendshape.com

How to Use Shadcn UI with Next.js for Button Link

In this tutorial, we'll see how to use button Link using Next.js and Shadcn UI.
how to use shadcn ui in next js 13


Before use Button with Link in next js 13 with shadcn ui you need to install npx shadcn-ui add button.

npx shadcn-ui@latest add button
Enter fullscreen mode Exit fullscreen mode
  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>
  )
}
Enter fullscreen mode Exit fullscreen mode

next.js and shadcn ui button link
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>
  )
}
Enter fullscreen mode Exit fullscreen mode

shadcn ui button link

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

See Also

πŸ‘‰Building a Next.js Hover-Activated Dropdown Menu with Shadcn UI
πŸ‘‰Next.js with Shadcn UI Product Cards Example
πŸ‘‰how to use icon in shadcn ui with next js 13
πŸ‘‰create responsive navbar in next 13 with shadcn ui
πŸ‘‰create footer section in next 13 with shadcn ui
πŸ‘‰Next.js Image File Upload and Preview with Shadcn UI
πŸ‘‰create sidebar in next 13 with shadcn ui
πŸ‘‰how to use skeleton loading next 13 with shadcn ui
πŸ‘‰next 13 with shadcn ui date picker example
πŸ‘‰next 13 with shadcn ui pagination example

Top comments (0)