| 1 |
const Button = ({ |
| 2 |
testId = '', |
| 3 |
disabled = false, |
| 4 |
className = '', |
| 5 |
children = '', |
| 6 |
type = 'primary', |
| 7 |
icon = '', |
| 8 |
iconPositionLeft = true, |
| 9 |
onClick = () => {}, |
| 10 |
}) => { |
| 11 |
const baseClassNames = |
| 12 |
'disco-text-base disco-shadow-custom disco-border disco-rounded-lg disco-px-8 disco-py-2.5 disco-flex disco-items-center disco-gap-2 disco-outline-none disco-font-medium disco-transition-colors disco-duration-200'; |
| 13 |
|
| 14 |
const getTypeClassNames = () => { |
| 15 |
switch (type) { |
| 16 |
case 'primary': |
| 17 |
return `${baseClassNames} disco-text-white disco-bg-primary disco-border-primary hover:disco-bg-primary-dark hover:disco-border-primary-dark`; |
| 18 |
|
| 19 |
case 'secondary': |
| 20 |
return `${baseClassNames} disco-text-grey-dark disco-bg-gray-100 disco-border-gray-200 hover:disco-bg-gray-200 hover:disco-border-gray-300`; |
| 21 |
|
| 22 |
case 'transparent': |
| 23 |
return `${baseClassNames} disco-text-black disco-bg-transparent disco-border-primary`; |
| 24 |
|
| 25 |
default: |
| 26 |
return baseClassNames; |
| 27 |
} |
| 28 |
}; |
| 29 |
|
| 30 |
let buttonClasses = `${getTypeClassNames()} ${className}`; |
| 31 |
|
| 32 |
// Handle icon position (right/left) |
| 33 |
if (!iconPositionLeft) { |
| 34 |
buttonClasses += ' !disco-flex-row-reverse'; |
| 35 |
} |
| 36 |
|
| 37 |
// Apply disabled styles |
| 38 |
if (disabled) { |
| 39 |
buttonClasses += ' disco-opacity-50 disco-cursor-not-allowed'; |
| 40 |
} |
| 41 |
|
| 42 |
return ( |
| 43 |
<button |
| 44 |
data-testid={testId} |
| 45 |
disabled={disabled} |
| 46 |
onClick={!disabled ? onClick : () => {}} |
| 47 |
className={buttonClasses} |
| 48 |
> |
| 49 |
{icon && icon} |
| 50 |
{children} |
| 51 |
</button> |
| 52 |
); |
| 53 |
}; |
| 54 |
|
| 55 |
export default Button; |
| 56 |
|
