Next.js Disabled Button with shadcn/ui Example

Welcome to our tutorial! Today, we’ll guide you through the process of creating disabled buttons in Next.js 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 project with Shadcn UI.

To use an loading buttons in Next.js 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

NextJS with Shadcn UI Disabled Buttons Example

1. Create basic disabled Button in Next.js 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 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 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>
  )
}

Sources

shadcn/ui button (ui.shadcn.com/docs)
lucide icon (lucide.dev/icons)

NextJS with Shadcn UI Disabled Buttons Example

Aaronn