47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { clsx } from 'clsx'
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
|
|
size?: 'sm' | 'md' | 'lg'
|
|
children: React.ReactNode
|
|
}
|
|
|
|
const Button: React.FC<ButtonProps> = ({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
className,
|
|
children,
|
|
...props
|
|
}) => {
|
|
const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2'
|
|
|
|
const variants = {
|
|
primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
|
|
secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
|
|
outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary-500',
|
|
ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-primary-500'
|
|
}
|
|
|
|
const sizes = {
|
|
sm: 'px-3 py-2 text-sm',
|
|
md: 'px-4 py-2 text-base',
|
|
lg: 'px-6 py-3 text-lg'
|
|
}
|
|
|
|
const classes = clsx(
|
|
baseClasses,
|
|
variants[variant],
|
|
sizes[size],
|
|
className
|
|
)
|
|
|
|
return (
|
|
<button className={classes} {...props}>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default Button
|