CoastalCommitsPastes/client/app/components/button/index.tsx

67 lines
1.4 KiB
TypeScript
Raw Normal View History

2022-04-09 20:48:19 -04:00
import styles from "./button.module.css"
import { forwardRef, Ref } from "react"
type Props = React.HTMLProps<HTMLButtonElement> & {
children?: React.ReactNode
2022-04-09 20:48:19 -04:00
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>(
2022-04-09 20:48:19 -04:00
(
{
children,
onClick,
className,
buttonType = "primary",
type = "button",
disabled = false,
iconRight,
iconLeft,
height,
width,
padding,
margin,
2022-04-09 20:48:19 -04:00
...props
},
ref
) => {
return (
<button
ref={ref}
className={`${styles.button} ${styles[type]} ${className || ""}`}
2022-04-09 20:48:19 -04:00
disabled={disabled}
onClick={onClick}
style={{ height, width, margin, padding }}
2022-04-09 20:48:19 -04:00
{...props}
>
{children && iconLeft && (
<span className={`${styles.icon} ${styles.iconLeft}`}>
{iconLeft}
</span>
)}
2022-11-18 01:36:53 -05:00
{children ? (
children
) : (
<span className={`${styles.icon}`}>{iconLeft || iconRight}</span>
)}
{children && iconRight && (
<span className={`${styles.icon} ${styles.iconRight}`}>
{iconRight}
</span>
)}
2022-04-09 20:48:19 -04:00
</button>
)
}
)
export default Button