Components
Loading preview...
A versatile button component with built-in loading state and smooth transitions for handling asynchronous actions.
npx shadcn@latest add https://21st.dev/r/Codehagen/action-button"use client";
import { useState } from "react";
import ActionButton from "@/components/ui/action-button";
function ActionButtonBasic() {
const [isPending, setIsPending] = useState(false);
function handleClick() {
setIsPending(true);
setTimeout(() => setIsPending(false), 1500);
}
return (
<div className="flex min-h-[200px] w-full items-center justify-center">
<ActionButton onClick={handleClick} isPending={isPending}>
Submit
</ActionButton>
</div>
);
}
export { ActionButtonBasic };