From 41ad0f718dcda69d502b28302571741470672e05 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Mon, 1 Dec 2025 14:13:01 +0100
Subject: [PATCH] refactor: use Button component instead of plain button in
 CopyButton (#25489)

* refactor: use Button component instead of plain button in CopyButton

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* add shrink-0 to StartIcon and EndIcon of Button

* remove unused class names

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../insights/hooks/useInsightsColumns.tsx     | 27 +++++++------------
 packages/ui/components/button/Button.tsx      | 10 ++++---
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/features/insights/hooks/useInsightsColumns.tsx b/packages/features/insights/hooks/useInsightsColumns.tsx
index 49b4760f60..8590a7e208 100644
--- a/packages/features/insights/hooks/useInsightsColumns.tsx
+++ b/packages/features/insights/hooks/useInsightsColumns.tsx
@@ -1,5 +1,4 @@
 import { createColumnHelper } from "@tanstack/react-table";
-// eslint-disable-next-line no-restricted-imports
 import startCase from "lodash/startCase";
 import { useMemo } from "react";
 import { z } from "zod";
@@ -11,7 +10,7 @@ import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RoutingFormFieldType } from "@calcom/routing-forms/lib/FieldTypes";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import { Button } from "@calcom/ui/components/button";
 
 import { BookedByCell } from "../components/BookedByCell";
 import { BookingAtCell } from "../components/BookingAtCell";
@@ -349,24 +348,16 @@ function CopyButton({ label, value }: { label: string; value: string }) {
   const { copyToClipboard, isCopied } = useCopy();
   const { t } = useLocale();
   return (
-    <button
-      className="flex w-full items-center gap-1 overflow-hidden"
-      title={value}
+    <Button
+      color="minimal"
+      size="sm"
+      className="overflow-hidden"
+      tooltip={value}
+      EndIcon={isCopied ? "check" : "clipboard"}
       onClick={() => {
         copyToClipboard(value);
       }}>
-      {!isCopied && (
-        <>
-          <span className="truncate">{label}</span>
-          <Icon name="clipboard" className="shrink-0" size={14} />
-        </>
-      )}
-      {isCopied && (
-        <>
-          <span className="grow truncate text-left">{t("copied")}</span>
-          <Icon name="check" className="shrink-0" size={14} />
-        </>
-      )}
-    </button>
+      <span className="truncate">{isCopied ? t("copied") : label}</span>
+    </Button>
   );
 }
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index b1f9bd547e..fcd87c1f9d 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -264,14 +264,15 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           <>
             {variant === "fab" ? (
               <>
-                <Icon name={StartIcon} className="hidden h-4 w-4 stroke-[1.5px]  md:inline-flex" />
-                <Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
+                <Icon name={StartIcon} className="hidden h-4 w-4 shrink-0 stroke-[1.5px]  md:inline-flex" />
+                <Icon name="plus" data-testid="plus" className="inline h-6 w-6 shrink-0 md:hidden" />
               </>
             ) : (
               <Icon
                 data-name="start-icon"
                 name={StartIcon}
                 className={classNames(
+                  "shrink-0",
                   loading ? "invisible" : "visible",
                   "button-icon group-[:not(div):active]:translate-y-[0.5px]",
                   variant === "icon" && "h-4 w-4",
@@ -313,13 +314,14 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         <>
           {variant === "fab" ? (
             <>
-              <Icon name={EndIcon} className="-mr-1 me-2 ms-2 hidden h-5 w-5 md:inline" />
-              <Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
+              <Icon name={EndIcon} className="-mr-1 me-2 ms-2 hidden h-5 w-5 shrink-0 md:inline" />
+              <Icon name="plus" data-testid="plus" className="inline h-6 w-6 shrink-0 md:hidden" />
             </>
           ) : (
             <Icon
               name={EndIcon}
               className={classNames(
+                "shrink-0",
                 loading ? "invisible" : "visible",
                 "group-[:not(div):active]:translate-y-[0.5px]",
                 variant === "icon" && "h-4 w-4",