diff --git a/package-lock.json b/package-lock.json
index 0c85d6e..b43048c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@aurodesignsystem/auro-loader": "^2.0.6",
+        "@aurodesignsystem/auro-loader": "^2.1.0-beta.2",
         "chalk": "^5.3.0",
         "lit": "^3.1.4"
       },
@@ -105,13 +105,13 @@
       }
     },
     "node_modules/@aurodesignsystem/auro-loader": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-loader/-/auro-loader-2.0.6.tgz",
-      "integrity": "sha512-7sVtiRgV9EjcrD1z9UeRzkLOdVYvrmwNxulQHtNPJ3TcLCYeCCy4OH35yW4Ad8Hj9vxIB1xVgkeMDJVq0cVpWw==",
+      "version": "2.1.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-loader/-/auro-loader-2.1.0-beta.2.tgz",
+      "integrity": "sha512-7x2bjYuROEdZhGWg51uhqsK6DtoEmiBshgmADfdMRZLOwjkC+8YYFtDlMTN50B0K4MauVHEQ+7p82lOzFAfEdg==",
       "hasInstallScript": true,
       "dependencies": {
         "chalk": "^5.3.0",
-        "lit": "^3.1.2"
+        "lit": "^3.1.4"
       },
       "engines": {
         "node": "^18.x || ^20.x "
diff --git a/package.json b/package.json
index d57870e..32df8c9 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "node": "^18 || ^20"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-loader": "^2.0.6",
+    "@aurodesignsystem/auro-loader": "^2.1.0-beta.2",
     "chalk": "^5.3.0",
     "lit": "^3.1.4"
   },
@@ -88,14 +88,15 @@
     ]
   },
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:version build:sass sass:render build:api build:docs bundler",
     "build:test": "npm-run-all test linters",
-    "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
+    "build:release": "npm-run-all build:test build types postinstall",
     "build:ci": "npm-run-all sweep build:release",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render",
     "build:api": "wca analyze 'src/auro-button.js' --outFiles docs/api.md",
     "build:docs": "node scripts/generateDocs.mjs",
     "build:watch": "nodemon -e scss,js --watch src --exec npm run build:dev:assets",
+    "build:version": "node scripts/version.mjs",
     "bundler": "rollup -c",
     "bundle:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",
diff --git a/scripts/version.mjs b/scripts/version.mjs
new file mode 100644
index 0000000..77ac5b0
--- /dev/null
+++ b/scripts/version.mjs
@@ -0,0 +1,3 @@
+import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';
+
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-loader');
diff --git a/src/auro-button.js b/src/auro-button.js
index debc466..85591a1 100644
--- a/src/auro-button.js
+++ b/src/auro-button.js
@@ -3,13 +3,17 @@
 
 // ---------------------------------------------------------------------
 
-import { LitElement, html } from "lit";
+import { LitElement } from "lit";
+import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 import styleCss from "./style-css.js";
 import colorsCss from "./colors-css.js";
 import tokensCss from "./tokens-css.js";
-import '@aurodesignsystem/auro-loader';
+
+import { AuroLoader } from '@aurodesignsystem/auro-loader/src/auro-loader.js';
+import loaderVersion from './loaderVersion';
 
 /**
  * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
@@ -37,7 +41,8 @@ import '@aurodesignsystem/auro-loader';
  * @csspart icon - Apply CSS to icon slot.
  */
 
-/* eslint-disable max-statements, one-var, no-magic-numbers */
+/* eslint-disable max-statements, one-var, no-magic-numbers, lit/no-invalid-html, lit/binding-positions */
+
 export class AuroButton extends LitElement {
 
   constructor() {
@@ -53,6 +58,12 @@ export class AuroButton extends LitElement {
     this.rounded = false;
     this.slim = false;
     this.fluid = false;
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
   }
 
   static get styles() {
@@ -190,7 +201,7 @@ export class AuroButton extends LitElement {
         .value="${ifDefined(this.value ? this.value : undefined)}"
         @click="${() => {}}"
       >
-        ${ifDefined(this.loading ? html`<auro-loader pulse part="loader"></auro-loader>` : undefined)}
+        ${ifDefined(this.loading ? html`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
         <span class="contentWrapper">
           <span class="textSlot" part="text">
diff --git a/src/loaderVersion.js b/src/loaderVersion.js
new file mode 100644
index 0000000..d7ed1d1
--- /dev/null
+++ b/src/loaderVersion.js
@@ -0,0 +1 @@
+export default '2.1.0-beta.2'
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index 2b514ce..c8cd40a 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -134,7 +134,7 @@ slot {
   &.loading {
     cursor: not-allowed;
 
-    *:not(auro-loader) {
+    *:not([auro-loader]) {
       visibility: hidden;
     }
   }
@@ -286,7 +286,7 @@ slot {
   }
 }
 
-auro-loader {
+[auro-loader] {
   position: absolute;
   top: 50%;
   left: 50%;