17 lines
952 B
React
17 lines
952 B
React
|
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>
|
||
|
|
)
|
||
|
|
}
|