65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import styles from "./button.module.css"
|
|
import { forwardRef, Ref } from "react"
|
|
import clsx from "clsx"
|
|
|
|
type Props = React.HTMLProps<HTMLButtonElement> & {
|
|
children?: React.ReactNode
|
|
buttonType?: "primary" | "secondary"
|
|
className?: string
|
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
|
|
iconRight?: React.ReactNode
|
|
iconLeft?: React.ReactNode
|
|
height?: string | number
|
|
width?: string | number
|
|
padding?: string | number
|
|
margin?: string | number
|
|
}
|
|
|
|
// eslint-disable-next-line react/display-name
|
|
const Button = forwardRef<HTMLButtonElement, Props>(
|
|
(
|
|
{
|
|
children,
|
|
onClick,
|
|
className,
|
|
buttonType = "primary",
|
|
type = "button",
|
|
disabled = false,
|
|
iconRight,
|
|
iconLeft,
|
|
height,
|
|
width,
|
|
padding,
|
|
margin,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={`${styles.button} ${styles[type]} ${className || ""}`}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
style={{ height, width, margin, padding }}
|
|
{...props}
|
|
>
|
|
{children && iconLeft && (
|
|
<span className={clsx(styles.icon, styles.iconLeft)}>{iconLeft}</span>
|
|
)}
|
|
{children ? (
|
|
children
|
|
) : (
|
|
<span className={styles.icon}>{iconLeft || iconRight}</span>
|
|
)}
|
|
{children && iconRight && (
|
|
<span className={clsx(styles.icon, styles.iconRight)}>
|
|
{iconRight}
|
|
</span>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default Button
|