DEV Community

Cover image for next 13 with shadcn ui disabled button example
Aaronn
Aaronn

Posted on • Originally published at frontendshape.com

next 13 with shadcn ui disabled button example

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

disabled button shadcn ui


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


Enter fullscreen mode Exit fullscreen mode

variant disabled button shadcn ui


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


Enter fullscreen mode Exit fullscreen mode

loading disabled button shadcn ui


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


Enter fullscreen mode Exit fullscreen mode

click to loading states button

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 (1)

Collapse
 
solomon_kyewalabye_09faa4 profile image
Solomon Kyewalabye

Thanks a lot! I really needed this today.