Files
fabdash/frontend/src/components/UI/Button.jsx
2026-03-05 12:13:22 -06:00

17 lines
952 B
JavaScript

export default function Button({ children, variant='primary', size='md', onClick, type='button', disabled=false, className='' }) {
const base = 'font-medium rounded transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-gold/50 disabled:opacity-50 disabled:cursor-not-allowed'
const variants = {
primary: 'bg-gold text-surface hover:bg-gold-light',
secondary: 'bg-surface-elevated border border-surface-border text-text-primary hover:border-gold hover:text-gold',
danger: 'bg-red-500/20 border border-red-500/30 text-red-400 hover:bg-red-500/30',
ghost: 'text-text-muted hover:text-gold hover:bg-surface-elevated',
}
const sizes = { sm: 'px-3 py-1.5 text-xs', md: 'px-4 py-2 text-sm', lg: 'px-6 py-2.5 text-base' }
return (
<button type={type} onClick={onClick} disabled={disabled}
className={`${base} ${variants[variant]} ${sizes[size]} ${className}`}>
{children}
</button>
)
}