next 13 with shadcn ui disabled button example

#nextjs #webdev #shadcnui #tailwindcss

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

To use an loading buttons in Next.js 13 with Shadcn UI, first, make sure you've installed the Shadcn UI Button component.



npx shadcn-ui@latest add button
# or
npx shadcn-ui@latest add

Next 13 with Shadcn UI Disabled Buttons Example

1.Create basic disabled Button in Next.js 13 using the Shadcn UI Button component.



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

export default function DisabledButton() {
  return (
    <div>
      <Button disabled>Disabled Button</Button>
    </div>
  )
}

2.Creating disabled Buttons with Different variant in Next.js 13 with Shadcn UI - primary, secondary, destructive, outline, ghost and link.



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

3.Creating a Loading Disabled Button with Loader Icon in Next.js 13 and Shadcn UI.



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

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.



"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>
  )
}