From 4603722288aabc7d98b00dc9b7f59e81e6c6c4c1 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Thu, 12 Feb 2026 15:17:53 +0100
Subject: [PATCH] [web] Add button style for copy to clipboard component

GitOrigin-RevId: e387f79c829c903660638d3781839c44da10db07
---
 .../components/link-sharing.tsx                 |  2 +-
 .../js/shared/components/copy-to-clipboard.tsx  | 17 ++++++++++++++++-
 .../frontend/stylesheets/components/button.scss | 12 ++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/share-project-modal/components/link-sharing.tsx b/services/web/frontend/js/features/share-project-modal/components/link-sharing.tsx
index 7f73c83bd6..a5596cd418 100644
--- a/services/web/frontend/js/features/share-project-modal/components/link-sharing.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/link-sharing.tsx
@@ -313,7 +313,7 @@ function AccessToken({
   return (
     <div className="access-token">
       <code>{link}</code>
-      <CopyToClipboard content={link} tooltipId={tooltipId} />
+      <CopyToClipboard content={link} tooltipId={tooltipId} kind="button" />
     </div>
   )
 }
diff --git a/services/web/frontend/js/shared/components/copy-to-clipboard.tsx b/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
index 6549a20b11..aae0529384 100644
--- a/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
+++ b/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
@@ -3,11 +3,12 @@ import { useTranslation } from 'react-i18next'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import OLIconButton from '@/shared/components/ol/ol-icon-button'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export const CopyToClipboard = memo<{
   content: string
   tooltipId: string
-  kind?: 'text' | 'icon'
+  kind?: 'text' | 'icon' | 'button'
   unfilled?: boolean
   onClick?: () => void
 }>(({ content, tooltipId, kind = 'icon', unfilled = false, onClick }) => {
@@ -46,6 +47,20 @@ export const CopyToClipboard = memo<{
         >
           {t('copy')}
         </OLButton>
+      ) : kind === 'button' ? (
+        <OLButton
+          onClick={handleClick}
+          size="sm"
+          variant="ghost"
+          className="copy-button copy-button-ghost"
+        >
+          {copied ? (
+            <MaterialIcon type="check" />
+          ) : (
+            <MaterialIcon type="content_copy" unfilled />
+          )}
+          {t('copy')}
+        </OLButton>
       ) : (
         <OLIconButton
           onClick={handleClick}
diff --git a/services/web/frontend/stylesheets/components/button.scss b/services/web/frontend/stylesheets/components/button.scss
index 0e8c2d40e7..c42af66b6d 100644
--- a/services/web/frontend/stylesheets/components/button.scss
+++ b/services/web/frontend/stylesheets/components/button.scss
@@ -369,6 +369,18 @@ a.btn:visited {
   text-decoration: none;
 }
 
+.copy-button.copy-button-ghost {
+  @include ol-button-variant(
+    $color: var(--content-primary),
+    $background: transparent,
+    $hover-background: var(--bg-light-tertiary)
+  );
+
+  .button-content {
+    gap: var(--spacing-02);
+  }
+}
+
 .btn-reset {
   @include reset-button;
 }