Button component React typescript and Tailwind
import React from 'react';
import 'assets/scss/component/_buttons.scss'
type ButtonProps = {
className?: string;
type: string;
size?: string;
disabled?: boolean;
block?: boolean;
href?: string;
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}
const Button: React.FC<ButtonProps> = ({ children, className, type, size, disabled, block, href, onClick }) => {
const getClasses = () => {
return `btn btn-${type} btn-${size}${block ? ' btn-block' : ''}${disabled ? ' is-disabled' : ''}${className ? ' '+className : ''}`;
}
return (
<>
{href ?
<a href={href}
className={getClasses()}
>
{children}
</a>
:
<button
className={getClasses()}
onClick={onClick}
disabled={disabled}
>
{children}
</button>
}
</>
);
}
Button.defaultProps = {
size: 'md'
}
export default Button;
//and add tailwind classes in your scss file
@layer components {
.btn {
@apply inline-block font-medium hover:border-opacity-75 hover:bg-opacity-75;
}
.btn-block {
@apply block w-full text-center;
}
.btn-sm {
@apply py-1.5 px-3 text-sm rounded-sm;
}
.btn-md {
@apply py-2 px-4 text-base rounded;
}
.btn-lg {
@apply py-2.5 px-6 text-lg rounded-md;
}
.btn-primary {
@apply border border-purple-600 bg-purple-600;
}
.btn-secondary {
@apply border border-green-500 bg-green-500;
}
}