diff --git a/resources/js/Components/LoadingButton.tsx b/resources/js/Components/LoadingButton.tsx
index 9e94d2f5f..bae6a2dad 100644
--- a/resources/js/Components/LoadingButton.tsx
+++ b/resources/js/Components/LoadingButton.tsx
@@ -21,8 +21,8 @@ type Attributes = JSXElement<Button> & {
 
 export class LoadingButton extends Component<Attributes> {
   view() {
-    return ( // @ts-ignore
-      <mwc-button type="loading-button" {...this.attrs.all()}>
+    return (
+      <mwc-button data-component-type="loading-button" {...this.attrs.all()}>
         <span slot="icon" style="display: inline;">
           <mwc-circular-progress
             indeterminate
diff --git a/resources/js/Components/Managers/CircularProgressManager.ts b/resources/js/Components/Managers/CircularProgressManager.ts
index 54fef8237..3b85e2095 100644
--- a/resources/js/Components/Managers/CircularProgressManager.ts
+++ b/resources/js/Components/Managers/CircularProgressManager.ts
@@ -4,9 +4,10 @@ import {Manager} from './Manager';
 
 export class CircularProgressManager extends Manager {
   static selector = 'mwc-circular-progress';
-  static filter = (element: CircularProgress) => element.closest('mwc-button').type !== 'loading-button';
+  static filter = (element: CircularProgress) => element.closest('mwc-button')?.dataset.componentType !== 'loading-button';
 
-  constructor(private loading: CircularProgress) {
+  constructor(protected loading: CircularProgress) {
+    super(loading);
   }
 
   public show() {
diff --git a/resources/js/Components/Managers/DialogManager.ts b/resources/js/Components/Managers/DialogManager.ts
index 7c7c7b715..83ad799fc 100644
--- a/resources/js/Components/Managers/DialogManager.ts
+++ b/resources/js/Components/Managers/DialogManager.ts
@@ -5,7 +5,8 @@ import {Manager} from './Manager';
 export class DialogManager extends Manager {
   static selector = 'dialog';
 
-  constructor(private dialog: Dialog) {
+  constructor(protected dialog: Dialog) {
+    super(dialog);
   }
 
   public show(dialog: Dialog) {
diff --git a/resources/js/Components/Managers/LoadingButtonManager.ts b/resources/js/Components/Managers/LoadingButtonManager.ts
index 8aab669db..410ee0b88 100644
--- a/resources/js/Components/Managers/LoadingButtonManager.ts
+++ b/resources/js/Components/Managers/LoadingButtonManager.ts
@@ -1,13 +1,13 @@
 import {Button} from '@material/mwc-button';
-import {CircularProgress} from '@material/mwc-circular-progress';
 import {CircularProgressManager} from '@osm/Components/Managers';
 
 export class LoadingButtonManager extends CircularProgressManager {
-  static selector = 'mwc-button[type="loading-button"]';
-
-  private loading: CircularProgress;
+  static selector = 'mwc-button[data-component-type="loading-button"]';
 
   constructor(private button: Button) {
-    this.loading = button.querySelector('mwc-circular-progress');
+    const loading = button.querySelector('mwc-circular-progress');
+    if (loading) {
+      super(loading);
+    }
   }
 }
diff --git a/resources/js/Components/Managers/Manager.ts b/resources/js/Components/Managers/Manager.ts
index 644b7a41c..69b16c1a0 100644
--- a/resources/js/Components/Managers/Manager.ts
+++ b/resources/js/Components/Managers/Manager.ts
@@ -1,4 +1,11 @@
+export type ComponentManager =
+  {new(element: any | HTMLElement): Manager}
+  & Omit<typeof Manager, 'new'>;
+
 export abstract class Manager {
-  abstract static selector: string;
-  static filter: (element: HTMLElement) => boolean = () => true;
+  static selector: string;
+  static filter: (element: any | HTMLElement) => boolean = () => true;
+
+  protected constructor(protected element: HTMLElement) {
+  }
 }
diff --git a/resources/js/_material.ts b/resources/js/_material.ts
index 25c16e7c6..63d2811ac 100644
--- a/resources/js/_material.ts
+++ b/resources/js/_material.ts
@@ -9,6 +9,7 @@ import type {Dialog as MWCDialog} from '@material/mwc-dialog';
 import {Menu as MWCMenu} from '@material/mwc-menu';
 import {
   CircularProgressManager,
+  ComponentManager,
   DialogManager,
   LoadingButtonManager
 } from '@osm/Components/Managers';
@@ -51,7 +52,11 @@ function loadTriggers() {
 }
 
 function loadManagers() {
-  const managers = [DialogManager, CircularProgressManager, LoadingButtonManager];
+  const managers: ComponentManager[] = [
+    DialogManager,
+    CircularProgressManager,
+    LoadingButtonManager
+  ];
 
   for (const Manager of managers) {
     for (const element of document.querySelectorAll<HTMLElement>(Manager.selector)) {
diff --git a/resources/js/globals.d.ts b/resources/js/globals.d.ts
index 3353f916b..37d10ddd6 100644
--- a/resources/js/globals.d.ts
+++ b/resources/js/globals.d.ts
@@ -18,11 +18,7 @@ import {LinearProgress as MWCLinearProgress} from '@material/mwc-linear-progress
 import {List as MWCList} from '@material/mwc-list';
 import {ListItem as MWCListItem} from '@material/mwc-list/mwc-list-item.js';
 import {Menu as MWCMenu} from '@material/mwc-menu';
-import {
-  CircularProgressManager,
-  DialogManager,
-  LoadingButtonManager
-} from '@osm/Components/Managers';
+import {Manager} from '@osm/Components/Managers';
 import type cash from 'cash-dom';
 import type Mithril from 'mithril';
 import type router from 'ziggy-js';
@@ -41,13 +37,11 @@ import {
   TopAppBar
 } from './WebComponents';
 
-type ComponentManager = CircularProgressManager | DialogManager | LoadingButtonManager;
-
 declare global {
   const route: typeof router;
 
   let app: {
-    components: Record<string, ComponentManager>
+    components: Record<string, Manager>
     events: Record<string, Event>,
     locale: string,
     modules: OpenSTAManager.Modules,