DEV Community

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

Posted on β€’ Originally published at frontendshape.com

8

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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
solomon_kyewalabye_09faa4 profile image
Solomon Kyewalabye β€’

Thanks a lot! I really needed this today.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more