diff --git a/ui/core/app/components/copyable/index.hbs b/ui/core/app/components/copyable/index.hbs
index 848fa7685..8d0a3df75 100644
--- a/ui/core/app/components/copyable/index.hbs
+++ b/ui/core/app/components/copyable/index.hbs
@@ -1,7 +1,7 @@
 {{#if this.isClipboardLibrarySupported}}
   <span
     id={{this.id}}
-    aria-labelledby={{concat "copyable-text-" this.id}}
+    aria-labelledby={{this.copyableButtonId}}
     class="copyable"
     {{did-insert this.register}}
     {{will-destroy this.destroy}}
@@ -11,11 +11,10 @@
     </span>
 
     <Rose::Button
-      id={{concat "copyable-text-" this.id}}
+      id={{this.copyableButtonId}}
       class="copyable-button"
       @style="ghost"
       @iconOnly={{this.icon}}
-      data-clipboard-text={{@text}}
     >{{@text}}</Rose::Button>
   </span>
 {{else}}
diff --git a/ui/core/app/components/copyable/index.js b/ui/core/app/components/copyable/index.js
index f77b4a4d9..01dcad838 100644
--- a/ui/core/app/components/copyable/index.js
+++ b/ui/core/app/components/copyable/index.js
@@ -12,8 +12,10 @@ export default class CopyableComponent extends Component {
   // =attributes
 
   id = generateComponentID();
+  copyableButtonId = `copyable-button-${this.id}`;
   icon = 'copy-action';
 
+  @tracked text;
   @tracked clipboard;
 
   /**
@@ -58,7 +60,9 @@ export default class CopyableComponent extends Component {
   @action
   register() {
     if(!this.clipboard) {
-      this.clipboard = new ClipboardJS('.copyable-button');
+      this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
+        text: () => this.args.text,
+      });
       this.clipboard.on('success', bind(this, this.onCopySuccess));
     }
   }