How to Use Shadcn UI with Next.js for Button Link
Tags: nextjs, webdev, tailwindcss, shadcnui
Published: 2024-04-05 16:58:52

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](https://frontendshape.com/post/how-to-use-shadcn-ui-in-next-js-13)
<br>
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
```

1. Creating a Button as a Child Element with a Link in Next.js Using Shadcn UI.
```react
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>
  )
}
```
![next.js and shadcn ui button link](https://frontendshape.com/storage/canvas/images/3eBA4Ug5SoYVbCULuYJdSddgtYlemYxC7Fm0vFwf.png)
2.Creating a Button Link in Next.js with Shadcn UI, Featuring Variants like Secondary, Destructive, and Outline.
```react
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>
  )
}
```
![shadcn ui button link](https://frontendshape.com/storage/canvas/images/0s7MdVZFNV7S9Z5unzhcwospmQSGMydFiixAHhiS.png)

3.You can use the buttonVariants helper to create a link that looks like a button.
```react
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>
  );
}
```


## See Also
&#x1F449;[Building a Next.js Hover-Activated Dropdown Menu with Shadcn UI](https://frontendshape.com/post/building-a-nextjs-hover-activated-dropdown-menu-with-shadcn-ui)
&#x1F449;[Next.js with Shadcn UI Product Cards Example](https://frontendshape.com/post/nextjs-with-shadcn-ui-product-cards-example)
&#x1F449;[how to use icon in shadcn ui with next js 13](https://frontendshape.com/post/how-to-use-icon-in-shadcn-ui-with-next-js-13)
&#x1F449;[create responsive navbar in next 13 with shadcn ui](https://frontendshape.com/post/create-responsive-navbar-in-next-13-with-shadcn-ui)
&#x1F449;[create footer section in next 13 with shadcn ui](https://frontendshape.com/post/create-footer-section-in-next-13-with-shadcn-ui)
&#x1F449;[Next.js Image File Upload and Preview with Shadcn UI](https://frontendshape.com/post/nextjs-image-file-upload-and-preview-with-shadcn-ui)
&#x1F449;[create sidebar in next 13 with shadcn ui](https://frontendshape.com/post/create-sidebar-in-next-13-with-shadcn-ui)
&#x1F449;[how to use skeleton loading next 13 with shadcn ui](https://frontendshape.com/post/how-to-use-skeleton-loading-next-13-with-shadcn-ui)
&#x1F449;[next 13 with shadcn ui date picker example](https://frontendshape.com/post/next-13-with-shadcn-ui-date-picker-example)
&#x1F449;[next 13 with shadcn ui pagination example](https://frontendshape.com/post/next-13-with-shadcn-ui-pagination-example)