copy binding to clipboard button action

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CopyToClipboard.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { Label, Checkbox } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+
+  export let parameters
+  export let bindings = []
+
+  onMount(() => {
+    if (!parameters.showNotification) {
+      parameters.showNotification = true
+    }
+    if (!parameters.notificationMessage) {
+      parameters.notificationMessage = "Copied to clipboard"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label>Text to copy</Label>
+  <DrawerBindableInput
+    title="Text to copy"
+    {bindings}
+    value={parameters.textToCopy}
+    on:change={e => (parameters.textToCopy = e.detail)}
+  />
+  <Label />
+  <Checkbox text="Show notification" bind:value={parameters.showNotification} />
+  {#if parameters.showNotification}
+    <Label>Notification message</Label>
+    <DrawerBindableInput
+      title="Notification message"
+      {bindings}
+      value={parameters.notificationMessage}
+      placeholder="Copied to clipboard"
+      on:change={e => (parameters.notificationMessage = e.detail)}
+    />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 120px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js

@@ -26,3 +26,4 @@ export { default as CloseModal } from "./CloseModal.svelte"
 export { default as ClearRowSelection } from "./ClearRowSelection.svelte"
 export { default as DownloadFile } from "./DownloadFile.svelte"
 export { default as RowAction } from "./RowAction.svelte"
+export { default as CopyToClipboard } from "./CopyToClipboard.svelte"

packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json

@@ -183,6 +183,17 @@
       "name": "Row Action",
       "type": "data",
       "component": "RowAction"
+    },
+    {
+      "name": "Copy To Clipboard",
+      "type": "data",
+      "component": "CopyToClipboard",
+      "context": [
+        {
+          "label": "Copied text",
+          "value": "copied"
+        }
+      ]
     }
   ]
 }

packages/client/src/utils/buttonActions.js

@@ -421,6 +421,29 @@ const showNotificationHandler = action => {
 
 const promptUserHandler = () => {}
 
+const copyToClipboardHandler = action => {
+  const { textToCopy, showNotification, notificationMessage } =
+    action.parameters
+
+  if (!textToCopy) {
+    return
+  }
+
+  navigator.clipboard
+    .writeText(textToCopy)
+    .then(() => {
+      if (showNotification && notificationMessage) {
+        notificationStore.actions.success(notificationMessage, true, 3000)
+      }
+    })
+    .catch(err => {
+      console.error("Failed to copy text: ", err)
+      notificationStore.actions.error("Failed to copy to clipboard")
+    })
+
+  return { copied: textToCopy }
+}
+
 const openSidePanelHandler = action => {
   const { id } = action.parameters
   if (id) {
@@ -514,6 +537,7 @@ const handlerMap = {
   ["Close Modal"]: closeModalHandler,
   ["Download File"]: downloadFileHandler,
   ["Row Action"]: rowActionHandler,
+  ["Copy To Clipboard"]: copyToClipboardHandler,
 }
 
 const confirmTextMap = {