32 lines
835 B
TypeScript
32 lines
835 B
TypeScript
import type { ButtonHTMLAttributes } from "react";
|
|
|
|
export interface IconButtonProps
|
|
extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
size?: "sm" | "md" | "lg";
|
|
icon?: JSX.Element;
|
|
}
|
|
|
|
export const IconButton = ({
|
|
size = "md",
|
|
icon,
|
|
disabled,
|
|
className,
|
|
...rest
|
|
}: IconButtonProps): JSX.Element => {
|
|
return (
|
|
<button
|
|
className={`flex rounded-md bg-accentMuted text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
|
|
size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12"
|
|
} ${
|
|
disabled
|
|
? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled"
|
|
: ""
|
|
} ${className ?? ""}`}
|
|
disabled={disabled}
|
|
{...rest}
|
|
>
|
|
<div className="m-auto">{icon}</div>
|
|
</button>
|
|
);
|
|
};
|