27 lines
813 B
TypeScript
27 lines
813 B
TypeScript
import ReactLoading from 'react-loading'
|
|
|
|
type ButtonProps = {
|
|
children: React.ReactNode
|
|
className?: string
|
|
buttonClassName?: string
|
|
icon?: React.ReactNode
|
|
loading?: boolean
|
|
[others: string]: any
|
|
}
|
|
|
|
export const Button = ({ children, className, icon, loading, buttonClassName, ...others }: ButtonProps) => {
|
|
return (
|
|
<div className={`${className} relative overflow-hidden w-fit select-none `}>
|
|
{loading && (
|
|
<div className="flex justify-center items-center bg-white opacity-90 absolute inset-0">
|
|
<ReactLoading type="spin" width={30} height={30} color="black" />
|
|
</div>
|
|
)}
|
|
<button className={`flex items-center ${buttonClassName}`} {...others}>
|
|
{children}
|
|
{icon && <span className="ml-2">{icon}</span>}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|