diff --git a/ui/app/components/addon-copy-button.js b/ui/app/components/addon-copy-button.js
new file mode 100644
index 00000000000..b0a0ab9c45a
--- /dev/null
+++ b/ui/app/components/addon-copy-button.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-clipboard/components/copy-button';
diff --git a/ui/app/components/x-copy-button.js b/ui/app/components/copy-button.js
similarity index 89%
rename from ui/app/components/x-copy-button.js
rename to ui/app/components/copy-button.js
index 24f387a64d2..f677bba344b 100644
--- a/ui/app/components/x-copy-button.js
+++ b/ui/app/components/copy-button.js
@@ -2,7 +2,7 @@ import Component from '@ember/component';
 import { run } from '@ember/runloop';
 
 export default Component.extend({
-  classNames: ['x-copy-button'],
+  classNames: ['copy-button'],
 
   state: null,
 
diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
index 2c2215b41b6..98b02a8402a 100644
--- a/ui/app/styles/core/buttons.scss
+++ b/ui/app/styles/core/buttons.scss
@@ -134,7 +134,7 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
   }
 }
 
-.x-copy-button {
+.copy-button {
   padding-left: 0.5rem;
   margin-bottom: 2px;
 
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
index 67d3a9794a3..578ec2ab7e9 100644
--- a/ui/app/templates/allocations/allocation/index.hbs
+++ b/ui/app/templates/allocations/allocation/index.hbs
@@ -18,7 +18,7 @@
     <span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span>
     <span class="tag is-hollow is-small no-text-transform">
       {{model.id}}
-      {{x-copy-button clipboardText=model.id}}
+      {{copy-button clipboardText=model.id}}
     </span>
     {{#if model.isRunning}}
       {{two-step-button
diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs
index aaa4d799817..a7aff9372dd 100644
--- a/ui/app/templates/clients/client.hbs
+++ b/ui/app/templates/clients/client.hbs
@@ -4,7 +4,7 @@
     {{or model.name model.shortId}}
     <span class="tag is-hollow is-small no-text-transform">
       {{model.id}}
-      {{x-copy-button clipboardText=model.id}}
+      {{copy-button clipboardText=model.id}}
     </span>
   </h1>
 
diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/copy-button.hbs
similarity index 93%
rename from ui/app/templates/components/x-copy-button.hbs
rename to ui/app/templates/components/copy-button.hbs
index 7e9c2bdbf59..2c362db8646 100644
--- a/ui/app/templates/components/x-copy-button.hbs
+++ b/ui/app/templates/components/copy-button.hbs
@@ -12,12 +12,12 @@
     </span>
   </div>
 {{else}}
-  {{#copy-button
+  {{#addon-copy-button
     class='button is-borderless is-small'
     clipboardText=clipboardText
     success=(action 'success')
     error=(action (mut state) 'error')
   }}
     {{x-icon 'copy-action'}}
-  {{/copy-button}}
+  {{/addon-copy-button}}
 {{/if}}
\ No newline at end of file
diff --git a/ui/tests/integration/components/x-copy-button-test.js b/ui/tests/integration/components/x-copy-button-test.js
index 5bd7c2e6052..cdde40beaa3 100644
--- a/ui/tests/integration/components/x-copy-button-test.js
+++ b/ui/tests/integration/components/x-copy-button-test.js
@@ -7,11 +7,11 @@ import sinon from 'sinon';
 
 import { triggerCopyError, triggerCopySuccess } from 'ember-cli-clipboard/test-support';
 
-module('Integration | Component | x-copy-button', function(hooks) {
+module('Integration | Component | copy-button', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it shows the copy icon by default', async function(assert) {
-    await render(hbs`{{x-copy-button class='copy-button'}}`);
+    await render(hbs`{{copy-button class='copy-button'}}`);
 
     assert.dom('.copy-button .icon-is-copy-action').exists();
   });
@@ -19,7 +19,7 @@ module('Integration | Component | x-copy-button', function(hooks) {
   test('it shows the success icon on success and resets afterward', async function(assert) {
     const clock = sinon.useFakeTimers();
 
-    await render(hbs`{{x-copy-button class='copy-button'}}`);
+    await render(hbs`{{copy-button class='copy-button'}}`);
 
     await click('.copy-button button');
     await triggerCopySuccess('.copy-button button');
@@ -35,7 +35,7 @@ module('Integration | Component | x-copy-button', function(hooks) {
   });
 
   test('it shows the error icon on error', async function(assert) {
-    await render(hbs`{{x-copy-button class='copy-button'}}`);
+    await render(hbs`{{copy-button class='copy-button'}}`);
 
     await click('.copy-button button');
     await triggerCopyError('.copy-button button');