import { cn } from "@/lib/utils.ts";
type ButtonVariant = "default" | "secondary" | "ghost" | "outline" | "destructive" | "link";
type ButtonSize = "default" | "sm" | "lg" | "icon";
const variantStyles: Record<ButtonVariant, string> = {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
outline:
"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
link: "text-primary underline-offset-4 hover:underline",
};
const sizeStyles: Record<ButtonSize, string> = {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-6",
icon: "h-9 w-9",
};
export function Button({
className,
variant = "default",
size = "default",
...props
}: React.ComponentProps<"button"> & {
variant?: ButtonVariant;
size?: ButtonSize;
}) {
return (
<button
className={cn(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
variantStyles[variant],
sizeStyles[size],
className,
)}
{...props}
/>
);
}
