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>
)
}
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)
Thanks a lot! I really needed this today.