diff --git a/src/components/button.ts b/src/components/button.ts
deleted file mode 100644
index ab2a3931..00000000
--- a/src/components/button.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { html } from 'lit';
-import { styleMap } from 'lit-html/directives/style-map.js';
-
-export function getButton(click: () => void, icon: string | null, name = '') {
-  return html`
-    <ha-control-button @click="${click}" style=${buttonStyle()}>
-      ${icon ? html`<ha-icon .icon=${icon} style=${iconStyle()}></ha-icon>` : ''}
-      ${name ? html`<span style=${textStyle()}>${name}</span>` : ''}
-    </ha-control-button>
-  `;
-}
-
-function buttonStyle() {
-  return styleMap({
-    width: 'fit-content',
-    '--control-button-background-color': 'var(--accent-color)',
-    '--control-button-icon-color': 'var(--secondary-text-color)',
-  });
-}
-
-function iconStyle() {
-  return styleMap({ paddingRight: '1rem' });
-}
-
-function textStyle() {
-  return styleMap({ paddingRight: '1rem', paddingLeft: '1rem', fontWeight: 'bold' });
-}
diff --git a/src/components/grouping-button.ts b/src/components/grouping-button.ts
new file mode 100644
index 00000000..3f683da8
--- /dev/null
+++ b/src/components/grouping-button.ts
@@ -0,0 +1,43 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class GroupingButton extends LitElement {
+  @property() icon!: string;
+  @property() name!: string;
+
+  render() {
+    const iconAndName = (!!this.icon && !!this.name) || nothing;
+    return html`
+      <ha-control-button>
+        ${this.icon ? html` <ha-icon icon-and-name=${iconAndName} .icon=${this.icon}></ha-icon>` : ''}
+        ${this.name ? html`<span>${this.name}</span>` : ''}
+      </ha-control-button>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-control-button {
+        width: fit-content;
+        --control-button-background-color: var(--accent-color);
+        --control-button-icon-color: var(--secondary-text-color);
+      }
+
+      ha-icon {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      ha-icon[icon-and-name] {
+        padding-right: 0;
+      }
+
+      span {
+        padding-right: 1rem;
+        padding-left: 1rem;
+        font-weight: bold;
+      }
+    `;
+  }
+}
+
+customElements.define('sonos-grouping-button', GroupingButton);
diff --git a/src/sections/grouping.ts b/src/sections/grouping.ts
index caedea72..c1e81cbb 100755
--- a/src/sections/grouping.ts
+++ b/src/sections/grouping.ts
@@ -4,9 +4,9 @@ import { when } from 'lit/directives/when.js';
 import MediaControlService from '../services/media-control-service';
 import Store from '../model/store';
 import { dispatchActivePlayerId } from '../utils/utils';
-import { getButton } from '../components/button';
 import { listStyle } from '../constants';
 import { MediaPlayer } from '../model/media-player';
+import '../components/grouping-button';
 
 export class Grouping extends LitElement {
   @property() store!: Store;
@@ -50,8 +50,12 @@ export class Grouping extends LitElement {
   private renderJoinAllButton() {
     const notJoinedPlayers = this.getNotJoinedPlayers();
     return when(notJoinedPlayers.length, () => {
-      const click = async () => await this.mediaControlService.join(this.activePlayer.id, notJoinedPlayers);
-      return getButton(click, 'mdi:checkbox-multiple-marked-outline');
+      return html`
+        <sonos-grouping-button
+          @click=${async () => await this.mediaControlService.join(this.activePlayer.id, notJoinedPlayers)}
+          .icon=${'mdi:checkbox-multiple-marked-outline'}
+        ></sonos-grouping-button>
+      `;
     });
   }
 
@@ -64,8 +68,12 @@ export class Grouping extends LitElement {
   private renderUnJoinAllButton() {
     const joinedPlayers = this.getJoinedPlayers();
     return when(joinedPlayers.length, () => {
-      const click = async () => await this.mediaControlService.unJoin(joinedPlayers);
-      return getButton(click, 'mdi:minus-box-multiple-outline');
+      return html`
+        <sonos-grouping-button
+          @click=${async () => await this.mediaControlService.unJoin(joinedPlayers)}
+          .icon=${'mdi:minus-box-multiple-outline'}
+        ></sonos-grouping-button>
+      `;
     });
   }
 
@@ -97,8 +105,13 @@ export class Grouping extends LitElement {
 
   private renderPredefinedGroups() {
     return this.store.predefinedGroups.map((predefinedGroup) => {
-      const click = async () => await this.mediaControlService.createGroup(predefinedGroup, this.allGroups);
-      return getButton(click, 'mdi:speaker-multiple', predefinedGroup.name);
+      return html`
+        <sonos-grouping-button
+          @click=${async () => await this.mediaControlService.createGroup(predefinedGroup, this.allGroups)}
+          .icon=${'mdi:speaker-multiple'}
+          .name=${predefinedGroup.name}
+        ></sonos-grouping-button>
+      `;
     });
   }
   static get styles() {