42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { ButtonHTMLAttributes, ReactNode } from 'react'
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
|
|
size?: 'sm' | 'md' | 'lg'
|
|
children: ReactNode
|
|
}
|
|
|
|
export function Button({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
className = '',
|
|
children,
|
|
...props
|
|
}: ButtonProps) {
|
|
const baseStyles =
|
|
'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'
|
|
|
|
const variants = {
|
|
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
|
|
secondary: 'bg-slate-600 text-white hover:bg-slate-700 focus:ring-slate-500',
|
|
outline:
|
|
'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
|
|
ghost: 'text-slate-600 hover:bg-slate-100 focus:ring-slate-500',
|
|
}
|
|
|
|
const sizes = {
|
|
sm: 'px-3 py-1.5 text-sm',
|
|
md: 'px-4 py-2 text-base',
|
|
lg: 'px-6 py-3 text-lg',
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|