tynanpurdy.com
Fork of atp.tools as a universal profile for people on the ATmosphere
1import clsx from "clsx";
2interface IconButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
3 className?: string;
4 Icon: React.ReactNode;
5 onClick?: () => void;
6 ariaLabel?: string;
7 disabled?: boolean;
8}
9
10export const IconButton = (props: IconButtonProps) => {
11 const Icon = props.Icon;
12 return (
13 // tailwindcss button
14 <button
15 className={clsx(
16 props.className,
17 "flex items-center justify-center w-10 h-10 p-3 rounded-full transition-colors duration-150 bg-gray-200 dark:bg-gray-800 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700",
18 "disabled:cursor-default disabled:bg-gray-200 disabled:dark:bg-gray-800",
19 )}
20 disabled={props.disabled}
21 onClick={props.onClick}
22 aria-label={props.ariaLabel}
23 >
24 {Icon}
25 </button>
26 );
27};