tooltip-icon-button.tsx•1.06 kB
"use client";
import { forwardRef } from "react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@repo/design/shadcn/tooltip";
import { Button, ButtonProps } from "@repo/design/shadcn/button";
import { cn } from "@repo/design/lib/utils";
export type TooltipIconButtonProps = ButtonProps & {
tooltip: string;
side?: "top" | "bottom" | "left" | "right";
};
export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" {...rest} className={cn("size-6 p-1", className)} ref={ref}>
{children}
<span className="sr-only">{tooltip}</span>
</Button>
</TooltipTrigger>
<TooltipContent side={side}>{tooltip}</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
);
TooltipIconButton.displayName = "TooltipIconButton";