Skip to main content

IconButton

Code

components/IconButton/index.tsx
import { cloneElement, useMemo } from 'react'
import type {
ButtonHTMLAttributes,
DetailedHTMLProps,
FC,
ReactElement,
ReactNode
} from 'react'
import classnames from 'classnames'

export interface Props
extends DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> {
children: ReactNode
}

const IconButton: FC<Props> = ({ children, className, ...props }) => {
const clone = useMemo(
() =>
cloneElement(children as ReactElement, {
className: 'text-gray-400 h-4 w-4 group-hover:text-gray-700'
}),
[children]
)
return (
<button
{...props}
className={classnames(
'flex items-center justify-center border border-gray-300 hover:border-gray-700 group rounded-full p-2 bg-white disabled:cursor-not-allowed',
className
)}
>
{clone}
</button>
)
}

export default IconButton

Props

NameTypeDefault
children*node

Example