38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'text';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
className = '',
|
|
children,
|
|
...props
|
|
}) => {
|
|
const baseStyles = "inline-flex items-center justify-center rounded-md font-medium transition-all duration-150 ease-out active:scale-98 disabled:opacity-50 disabled:pointer-events-none";
|
|
|
|
const variants = {
|
|
primary: "bg-warm-text-secondary text-white hover:bg-warm-text-primary shadow-sm",
|
|
secondary: "bg-white border border-warm-divider text-warm-text-secondary hover:bg-warm-hover",
|
|
outline: "bg-transparent border border-warm-text-secondary text-warm-text-secondary hover:bg-warm-hover",
|
|
text: "text-warm-text-muted hover:text-warm-text-primary hover:bg-warm-hover",
|
|
};
|
|
|
|
const sizes = {
|
|
sm: "h-8 px-3 text-xs",
|
|
md: "h-10 px-4 text-sm",
|
|
lg: "h-12 px-6 text-base",
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}; |