diff options
Diffstat (limited to 'apps/web/components/ui/button.tsx')
| -rw-r--r-- | apps/web/components/ui/button.tsx | 27 |
1 files changed, 26 insertions, 1 deletions
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx index 40794eb2..2d6dee6b 100644 --- a/apps/web/components/ui/button.tsx +++ b/apps/web/components/ui/button.tsx @@ -4,6 +4,13 @@ import { cn } from "@/lib/utils"; import { Slot } from "@radix-ui/react-slot"; import { cva } from "class-variance-authority"; +import { + Tooltip, + TooltipContent, + TooltipPortal, + TooltipTrigger, +} from "./tooltip"; + const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { @@ -24,6 +31,7 @@ const buttonVariants = cva( link: "text-primary underline-offset-4 hover:underline", }, size: { + none: "", default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", @@ -57,4 +65,21 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ); Button.displayName = "Button"; -export { Button, buttonVariants }; +const ButtonWithTooltip = React.forwardRef< + HTMLButtonElement, + ButtonProps & { tooltip: string; delayDuration?: number } +>(({ tooltip, delayDuration, ...props }, ref) => { + return ( + <Tooltip delayDuration={delayDuration}> + <TooltipTrigger> + <Button ref={ref} {...props} /> + </TooltipTrigger> + <TooltipPortal> + <TooltipContent>{tooltip}</TooltipContent> + </TooltipPortal> + </Tooltip> + ); +}); +ButtonWithTooltip.displayName = "ButtonWithTooltip"; + +export { Button, buttonVariants, ButtonWithTooltip }; |
