Loading Button
A button that shows a loading spinner when clicked.
import { LoadingButton } from "@/components/ui/loading-button";
const onClick = async () => { // Simulate an async operation (e.g., API call) await new Promise((resolve) => setTimeout(resolve, 3000)); console.log("Button action completed!");};
export const BasicLoadingButton = () => { return <LoadingButton onClick={onClick}>Click me</LoadingButton>;};Installation
Section titled “Installation”npx shadcn@latest add https://better-ui.ditin.in/r/loading-button.jsonyarn dlx shadcn@latest add https://better-ui.ditin.in/r/loading-button.jsonpnpx shadcn@latest add https://better-ui.ditin.in/r/loading-button.jsonbunx shadcn@latest add https://better-ui.ditin.in/r/loading-button.jsonimport { LoadingButton } from "@/components/ui/loading-button";const onClick = async () => { // Simulate an async operation (e.g., API call) await new Promise((resolve) => setTimeout(resolve, 3000)); console.log("Button action completed!");};
<LoadingButton onClick={onClick}>Click me</LoadingButton>;children
Section titled “children”- Type:
React.ReactNode - Description: The content to display inside the button.
variant
Section titled “variant”- Type:
"default" | "outline" | "ghost" | "link" - Default:
"default" - Description: The visual style variant of the button.
- Type:
"default" | "sm" | "lg" | "icon" - Default:
"default" - Description: The size of the button.
className
Section titled “className”- Type:
string - Description: Additional CSS classes to apply to the button.
onClick
Section titled “onClick”- Type:
() => Promise<void> | void - Description: Function to call when the button is clicked. Can be async.
- Type:
"button" | "submit" | "reset" - Default:
"button" - Description: The HTML button type attribute.