39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
import { LoaderCircle } from "lucide-react";
|
|
import { cn } from "../lib/cn";
|
|
|
|
export function Button({
|
|
className,
|
|
variant = "primary",
|
|
size = "md",
|
|
loading,
|
|
icon,
|
|
children,
|
|
disabled,
|
|
...props
|
|
}) {
|
|
return (
|
|
<button
|
|
className={cn(
|
|
"inline-flex items-center justify-center gap-2 rounded-md font-semibold transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
|
|
{
|
|
"bg-primary text-white hover:bg-primary-strong": variant === "primary",
|
|
"bg-accent text-white hover:bg-accent-dark": variant === "accent",
|
|
"border border-line bg-surface text-ink hover:border-primary hover:text-primary":
|
|
variant === "secondary",
|
|
"text-ink hover:bg-paper": variant === "ghost",
|
|
"bg-danger text-white hover:bg-danger/90": variant === "danger",
|
|
"h-9 px-3 text-sm": size === "sm",
|
|
"h-11 px-5 text-sm": size === "md",
|
|
"h-13 px-6 text-base": size === "lg",
|
|
},
|
|
className,
|
|
)}
|
|
disabled={disabled || loading}
|
|
{...props}
|
|
>
|
|
{loading ? <LoaderCircle className="size-4 animate-spin" /> : icon}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|