diff --git a/apiExamples/custom.html b/apiExamples/custom.html
new file mode 100644
index 0000000..1750ff7
--- /dev/null
+++ b/apiExamples/custom.html
@@ -0,0 +1,4 @@
+<custom-button>Primary</custom-button>
+<custom-button variant="secondary">Secondary</custom-button>
+<custom-button variant="tertiary">Tertiary</custom-button>
+
diff --git a/demo/index.html b/demo/index.html
index 135a0a1..5f1b53a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -29,6 +29,11 @@
         });
     </script>
     <script type="module" src="../index.js"></script>
+    <script type="module">
+      import { registerComponent } from '../index.js';
+
+      registerComponent('custom-button');
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
diff --git a/demo/index.md b/demo/index.md
index ab04d16..6afe76e 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -219,4 +219,38 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur
 </auro-alert>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Recommended Use and Version Control
+
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-button` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+
+```js
+import './node_modules/@aurodesignsystem/auro-button';
+registerComponent('custom-button');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
+  <custom-button>Primary</custom-button>
+  <custom-button variant="secondary">Secondary</custom-button>
+  <custom-button variant="tertiary">Tertiary</custom-button>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+
+```html
+<custom-button>Primary</custom-button>
+<custom-button variant="secondary">Secondary</custom-button>
+<custom-button variant="tertiary">Tertiary</custom-button>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/docs/partials/index.md b/docs/partials/index.md
index b5a5d00..5524b19 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -133,3 +133,29 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+## Recommended Use and Version Control
+
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-button` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+
+```js
+import './node_modules/@aurodesignsystem/auro-button';
+registerComponent('custom-button');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
diff --git a/index.js b/index.js
index 3d705e3..5365302 100644
--- a/index.js
+++ b/index.js
@@ -11,6 +11,3 @@ export function registerComponent(name) {
     customElements.define(name, class extends AuroButton {});
   }
 }
-
-// Example custom registration
-// registerComponent('my-button');
diff --git a/package-lock.json b/package-lock.json
index 2cfca04..c071106 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@aurodesignsystem/auro-button",
-  "version": "7.2.6",
+  "version": "7.2.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aurodesignsystem/auro-button",
-      "version": "7.2.6",
+      "version": "7.2.7",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {