diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
index 7b0ade9da..1075ae081 100644
--- a/src/lib/components/event/event-details-row-expanded.svelte
+++ b/src/lib/components/event/event-details-row-expanded.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
 
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import { format } from '$lib/utilities/format-camel-case';
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index e3545557f..b3041cecf 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
 
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import { format } from '$lib/utilities/format-camel-case';
@@ -52,7 +52,7 @@
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class="xl:flex-row h-12 pr-1"
+          container-class="xl:flex-row"
         >
           <Link
             class="truncate"
@@ -76,7 +76,7 @@
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class="xl:flex-row h-12 pr-1"
+          container-class="xl:flex-row"
         >
           <Link
             class="truncate"
@@ -100,7 +100,6 @@
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class="h-12 pr-1"
         >
           <Link
             class="truncate"
diff --git a/src/lib/components/workflow-actions.svelte b/src/lib/components/workflow-actions.svelte
index 06ce8f977..2b5180769 100644
--- a/src/lib/components/workflow-actions.svelte
+++ b/src/lib/components/workflow-actions.svelte
@@ -10,14 +10,13 @@
   import SplitButton from '$lib/holocene/split-button.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { Action } from '$lib/models/workflow-actions';
-  import { ResetReapplyType } from '$lib/models/workflow-actions';
+  import { Action, ResetReapplyType } from '$lib/models/workflow-actions';
   import {
+    cancelWorkflow,
     resetWorkflow,
     signalWorkflow,
     terminateWorkflow,
   } from '$lib/services/workflow-service';
-  import { cancelWorkflow } from '$lib/services/workflow-service';
   import { authUser } from '$lib/stores/auth-user';
   import { coreUserStore } from '$lib/stores/core-user';
   import { resetEvents } from '$lib/stores/events';
diff --git a/src/lib/components/workflow/first-previous-next-workflow-table.svelte b/src/lib/components/workflow/first-previous-next-workflow-table.svelte
index 7a76a11ac..62676edea 100644
--- a/src/lib/components/workflow/first-previous-next-workflow-table.svelte
+++ b/src/lib/components/workflow/first-previous-next-workflow-table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
diff --git a/src/lib/components/workflow/parent-workflow-table.svelte b/src/lib/components/workflow/parent-workflow-table.svelte
index ee64c9d3a..360975f08 100644
--- a/src/lib/components/workflow/parent-workflow-table.svelte
+++ b/src/lib/components/workflow/parent-workflow-table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
diff --git a/src/lib/components/workflow/scheduler-table.svelte b/src/lib/components/workflow/scheduler-table.svelte
index 3d99e5ee2..7c83b597d 100644
--- a/src/lib/components/workflow/scheduler-table.svelte
+++ b/src/lib/components/workflow/scheduler-table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
diff --git a/src/lib/components/workflow/workflow-detail.svelte b/src/lib/components/workflow/workflow-detail.svelte
index f94330037..c6fa69766 100644
--- a/src/lib/components/workflow/workflow-detail.svelte
+++ b/src/lib/components/workflow/workflow-detail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
 
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap
index 349360969..230042b79 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap
@@ -12,7 +12,7 @@ exports[`Table_body_cell$ > History Size renders 1`] = `"<td class=\\"workflows-
 
 exports[`Table_body_cell$ > Parent Namespace renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">parent-namespace-id</td>"`;
 
-exports[`Table_body_cell$ > Run ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link svelte-1v8baj6\\"> def-456</a> </td>"`;
+exports[`Table_body_cell$ > Run ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link inline svelte-1f9ld6i\\"> def-456</a> </td>"`;
 
 exports[`Table_body_cell$ > Start renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">2023-04-27 UTC 00:00:00.00</td>"`;
 
@@ -22,6 +22,6 @@ exports[`Table_body_cell$ > Status renders 1`] = `"<td class=\\"workflows-summar
 
 exports[`Table_body_cell$ > Task Queue renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">task-queue</td>"`;
 
-exports[`Table_body_cell$ > Type renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link svelte-1v8baj6\\"> mock-workflow</a> </td>"`;
+exports[`Table_body_cell$ > Type renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link inline svelte-1f9ld6i\\"> mock-workflow</a> </td>"`;
 
-exports[`Table_body_cell$ > Workflow ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link svelte-1v8baj6\\"> abc-123</a> </td>"`;
+exports[`Table_body_cell$ > Workflow ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link inline svelte-1f9ld6i\\"> abc-123</a> </td>"`;
diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 5a66e3aca..9e14d3f7a 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -15,6 +15,7 @@
   import { EditorView, keymap } from '@codemirror/view';
   import { createEventDispatcher, onMount } from 'svelte';
 
+  import CopyButton from '$lib/holocene/copyable/button.svelte';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
   import {
     parseWithBigInt,
@@ -25,8 +26,6 @@
     TEMPORAL_THEME,
   } from '$lib/vendor/codemirror/theme';
 
-  import Icon from './icon/icon.svelte';
-
   type BaseProps = HTMLAttributes<HTMLDivElement> & {
     content: string;
     language?: 'json' | 'text';
@@ -58,6 +57,10 @@
 
   const { copy, copied } = copyToClipboard();
 
+  const handleCopy = (e: Event) => {
+    copy(e, stringifyWithBigInt(content, undefined, 2));
+  };
+
   let editor: HTMLElement;
   let view: EditorView;
 
@@ -145,15 +148,12 @@
     {...$$restProps}
   />
   {#if copyable}
-    <button
-      on:click={(e) => copy(e, stringifyWithBigInt(content, undefined, 2))}
-      class="absolute top-2.5 right-2.5 rounded-md bg-gray-900 opacity-90 hover:bg-white"
-    >
-      <Icon
-        title={$copied ? copySuccessIconTitle : copyIconTitle}
-        name={$copied ? 'checkmark' : 'copy'}
-        class="text-white hover:text-gray-900"
-      />
-    </button>
+    <CopyButton
+      {copyIconTitle}
+      {copySuccessIconTitle}
+      class="absolute top-1 right-1 text-white hover:text-gray-900 focus-visible:text-gray-900"
+      on:click={handleCopy}
+      copied={$copied}
+    />
   {/if}
 </div>
diff --git a/src/lib/holocene/copyable.svelte b/src/lib/holocene/copyable.svelte
deleted file mode 100644
index b6760fca3..000000000
--- a/src/lib/holocene/copyable.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import IconButton from '$lib/holocene/icon-button.svelte';
-  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
-
-  export let content: string;
-  export let visible = false;
-  export let clickAllToCopy = false;
-  export let copyIconTitle: string;
-  export let copySuccessIconTitle: string;
-
-  const { copy, copied } = copyToClipboard();
-</script>
-
-{#if clickAllToCopy}
-  <button
-    class="group flex items-center gap-2 {$$props['container-class']}"
-    on:click={(e) => copy(e, content)}
-  >
-    <slot>
-      <span class={$$props.class} class:select-all={!$$slots.default}
-        >{content}</span
-      >
-    </slot>
-    <IconButton
-      on:click={(e) => copy(e, content)}
-      class={`${visible ? 'visible' : 'invisible group-hover:visible'}`}
-      icon={$copied ? 'checkmark' : 'copy'}
-      label={$copied ? copySuccessIconTitle : copyIconTitle}
-    />
-  </button>
-{:else}
-  <div class="group flex items-center gap-2 {$$props['container-class']}">
-    <slot>
-      <span class={$$props.class} class:select-all={!$$slots.default}
-        >{content}</span
-      >
-    </slot>
-
-    <IconButton
-      on:click={(e) => copy(e, content)}
-      class={`${visible ? 'visible' : 'invisible group-hover:visible'}`}
-      icon={$copied ? 'checkmark' : 'copy'}
-      label={$copied ? copySuccessIconTitle : copyIconTitle}
-    />
-  </div>
-{/if}
diff --git a/src/lib/holocene/copyable/button.svelte b/src/lib/holocene/copyable/button.svelte
new file mode 100644
index 000000000..07e122d90
--- /dev/null
+++ b/src/lib/holocene/copyable/button.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  import Icon from '$lib/holocene/icon/icon.svelte';
+
+  interface $$Props extends HTMLButtonAttributes {
+    copyIconTitle: string;
+    copySuccessIconTitle: string;
+    copied: boolean;
+    'data-testid'?: string;
+  }
+
+  export let copyIconTitle: string;
+  export let copySuccessIconTitle: string;
+  export let copied: boolean;
+
+  let className = '';
+  export { className as class };
+</script>
+
+<button class="copy-button {className}" on:click {...$$restProps}>
+  <Icon
+    title={copied ? copySuccessIconTitle : copyIconTitle}
+    name={copied ? 'checkmark' : 'copy'}
+  />
+</button>
+
+<style lang="postcss">
+  .copy-button {
+    @apply m-1 rounded-md border-2 border-[transparent] hover:border-indigo-600 hover:bg-gradient-to-br hover:from-blue-100 hover:to-purple-100 hover:shadow-focus hover:shadow-blue-600/50 focus-visible:border-indigo-600 focus-visible:bg-gradient-to-br focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:outline-none;
+  }
+</style>
diff --git a/src/lib/holocene/copyable/index.svelte b/src/lib/holocene/copyable/index.svelte
new file mode 100644
index 000000000..3f57a7a03
--- /dev/null
+++ b/src/lib/holocene/copyable/index.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
+
+  import CopyButton from './button.svelte';
+
+  export let content: string;
+  export let visible = false;
+  export let clickAllToCopy = false;
+  export let copyIconTitle: string;
+  export let copySuccessIconTitle: string;
+
+  const { copy, copied } = copyToClipboard();
+
+  function handleOnClick(e: Event) {
+    copy(e, content);
+  }
+</script>
+
+{#if clickAllToCopy}
+  <button
+    class="group flex items-center gap-1 {$$props['container-class']}"
+    on:click={handleOnClick}
+  >
+    <slot>
+      <span class={$$props.class} class:select-all={!$$slots.default}
+        >{content}</span
+      >
+    </slot>
+    <CopyButton
+      {copyIconTitle}
+      {copySuccessIconTitle}
+      class={visible ? 'visible' : 'invisible group-hover:visible'}
+      on:click={handleOnClick}
+      copied={$copied}
+    />
+  </button>
+{:else}
+  <div class="group flex items-center gap-1 {$$props['container-class']}">
+    <slot>
+      <span class={$$props.class} class:select-all={!$$slots.default}
+        >{content}</span
+      >
+    </slot>
+    <CopyButton
+      {copyIconTitle}
+      {copySuccessIconTitle}
+      class={visible ? 'visible' : 'invisible group-hover:visible'}
+      on:click={handleOnClick}
+      copied={$copied}
+    />
+  </div>
+{/if}
diff --git a/src/lib/holocene/link.svelte b/src/lib/holocene/link.svelte
index 6296c35dc..8d6e40a22 100644
--- a/src/lib/holocene/link.svelte
+++ b/src/lib/holocene/link.svelte
@@ -26,7 +26,7 @@
   {href}
   target={newTab ? '_blank' : null}
   rel={newTab ? 'noreferrer' : null}
-  class="link {className}"
+  class="link {icon ? 'inline-flex' : 'inline'} {className}"
   class:active
   on:click
   {...$$restProps}
@@ -39,7 +39,7 @@
 
 <style lang="postcss">
   .link {
-    @apply inline-flex max-w-fit cursor-pointer items-center gap-2 rounded underline underline-offset-2 hover:text-indigo-600 focus-visible:bg-blue-100 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:outline-none;
+    @apply max-w-fit cursor-pointer items-center gap-2 rounded underline underline-offset-2 hover:text-indigo-600 focus-visible:bg-blue-100 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:outline-none;
 
     &.active {
       @apply text-blue-900;
diff --git a/src/lib/holocene/tooltip.svelte b/src/lib/holocene/tooltip.svelte
index a41d21474..0b7b40f5f 100644
--- a/src/lib/holocene/tooltip.svelte
+++ b/src/lib/holocene/tooltip.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import type { IconName } from '$lib/holocene/icon/paths';
   import type { Only } from '$lib/types/global';
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index bb68f7c41..a68a0cbc4 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -11,7 +11,7 @@
   import Alert from '$lib/holocene/alert.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import CompatibilityBadge from '$lib/holocene/compatibility-badge.svelte';
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TabList from '$lib/holocene/tab/tab-list.svelte';