next 13 with shadcn ui disabled button example
Tags: nextjs, webdev, shadcnui, tailwindcss
Published: 2024-01-02 08:43:45

Welcome to our tutorial! Today, we'll guide you through the process of creating disabled buttons in Next.js 13 with the help of Shadcn UI. We'll cover a range of scenarios, including buttons with icons, loading states, post-loading interactions, and more. But before we get started, let's begin by setting up a Next.js 13 project with Shadcn UI.

[how to use shadcn ui in next js 13](https://frontendshape.com/post/how-to-use-shadcn-ui-in-next-js-13)

To use an loading buttons in Next.js 13 with Shadcn UI, first, make sure you've installed the Shadcn UI Button component.
```js
npx shadcn-ui@latest add button
# or
npx shadcn-ui@latest add
```
<br>
### Next 13 with Shadcn UI Disabled Buttons Example

1.Create basic disabled Button in Next.js 13 using the Shadcn UI Button component.
```js
import { Button } from "@/components/ui/button"

export default function DisabledButton() {
  return (
    <div>
      <Button disabled>Disabled Button</Button>
    </div>
  )
}
```
![disabled button shadcn ui](https://frontendshape.com/storage/canvas/images/DJMGsRqhL5Zf177Ma90Sbhwaro5FW5vYhghqq5LT.png)
<br>
2.Creating disabled Buttons with Different variant in Next.js 13 with Shadcn UI - primary, secondary, destructive, outline, ghost and link.
```js
import { Button } from "@/components/ui/button"

export default function DisabledButton() {
  return (
    <div>
      <Button disabled>Disabled Button</Button>
      <Button variant="secondary" disabled>
        Disabled Button
      </Button>
      <Button variant="destructive" disabled>
        Disabled Button
      </Button>
      <Button variant="outline" disabled>
        Disabled Button
      </Button>
      <Button variant="ghost" disabled>
        Disabled Button
      </Button>
      <Button variant="link" disabled>
        Disabled Button
      </Button>
    </div>
  )
}
```
![variant disabled button shadcn ui](https://frontendshape.com/storage/canvas/images/Ch4sNbM7tdvR1EWUhqmHJRrEsKQcjfkY61YN9QlO.png)
<br>
3.Creating a Loading Disabled Button with Loader Icon in Next.js 13 and Shadcn UI.

```js
import { Loader2 } from "lucide-react"

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

export default function ButtonLoading() {
  return (
    <Button disabled>
      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
      Please wait
    </Button>
  )
}
```
![loading disabled button shadcn ui](https://frontendshape.com/storage/canvas/images/8tq6V42MmCvvxfbmLdz1FcXLnwUxmqwv1Xqql8BK.png)
<br>
4.Building a Loading Disabled Button with an Icon: Click to Trigger a 2-Second Loading Period, Followed by a 2-Second Disabled State. We'll Achieve This Using React's useState and setTimeout Methods in Next.js 13 with Shadcn UI.
```js
"use client"

import * as React from "react"
import { Loader2 } from "lucide-react"

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

export default function ButtonLoading() {
  const [isLoading, setIsLoading] = React.useState(false)

  const handleClick = () => {
    setIsLoading(true)
    setTimeout(() => {
      setIsLoading(false)
    }, 2000)
  }

  return (
    <Button disabled={isLoading} onClick={handleClick}>
      {isLoading ? (
        <>
          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          Loading...
        </>
      ) : (
        "Click to Loading"
      )}
    </Button>
  )
}
```
![click to loading states button](https://frontendshape.com/storage/canvas/images/Hch1J9R0JpEvHyLNAS17vHF5mGbEhEEK5t57roul.png)

## 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)