Loading Button

An accessible button component that can display loading, success, and idle states with animation.

Install

pnpm dlx shadcn@latest add https://www.katestroyui.com/r/loading-button

Usage

1import { LoadingButton } from "@/components/ui/loading-button";
2import { Loader2Icon } from "lucide-react";
3
4export function Example() {
5  return (
6    <LoadingButton
7  state="idle"
8  onClick={() => {}}
9  idleText="Save"
10  loadingIndicator={<Loader2Icon className="animate-spin" />} 
11  successText="Success!"
12    />
13  );
14}

Props

Prop	Type	Description	Default
state	"idle" \| "loading" \| "success"	Button state	"idle"
onClick	() => void	Click event	-
idleText	React.ReactNode	Idle text	"Form Submit"
loadingIndicator	React.ReactNode	Loading indicator	<Loader2Icon />
successText	React.ReactNode	Success text	"Form Submitted!"
className	string	Extra CSS classes	-
disabled	boolean	Whether the button is disabled	false