30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import * as React from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: "default" | "secondary" | "ghost" | "outline";
|
|
size?: "default" | "sm";
|
|
}
|
|
|
|
const variants: Record<string, string> = {
|
|
default: "bg-black text-white hover:bg-black/90",
|
|
secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
|
|
ghost: "bg-transparent hover:bg-slate-100",
|
|
outline: "border border-slate-300 hover:bg-slate-50",
|
|
};
|
|
|
|
const sizes: Record<string, string> = {
|
|
default: "h-10 px-4 py-2 rounded-2xl",
|
|
sm: "h-8 px-3 rounded-xl text-sm",
|
|
};
|
|
|
|
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ className, variant = "default", size = "default", ...props }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
className={twMerge("inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none shadow-sm", variants[variant], sizes[size], className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
Button.displayName = "Button"; |