57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import React, { ReactNode, MouseEventHandler } from 'react';
|
|
|
|
interface ButtonProps {
|
|
children: ReactNode;
|
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
className?: string;
|
|
variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
disabled?: boolean;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
}
|
|
|
|
export function Button({
|
|
children,
|
|
onClick,
|
|
className = '',
|
|
variant = 'primary',
|
|
size = 'md',
|
|
disabled = false,
|
|
type = 'button'
|
|
}: ButtonProps) {
|
|
const baseClasses = 'inline-flex items-center rounded-lg transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2';
|
|
|
|
const variantClasses = {
|
|
primary: 'bg-primary-blue text-white hover:bg-primary-blue/80 focus-visible:outline-primary-blue',
|
|
secondary: 'bg-iron-gray text-white border border-charcoal-outline hover:bg-iron-gray/80 focus-visible:outline-primary-blue',
|
|
danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600',
|
|
ghost: 'bg-transparent text-gray-400 hover:bg-gray-800 focus-visible:outline-gray-400'
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'min-h-[36px] px-3 py-1.5 text-xs',
|
|
md: 'min-h-[44px] px-4 py-2 text-sm',
|
|
lg: 'min-h-[52px] px-6 py-3 text-base'
|
|
};
|
|
|
|
const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
sizeClasses[size],
|
|
disabledClasses,
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={classes}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
} |