diff --git a/gallery/src/pages/components/ha-bar-button.markdown b/gallery/src/pages/components/ha-bar-button.markdown
deleted file mode 100644
index eb265b8f1f..0000000000
--- a/gallery/src/pages/components/ha-bar-button.markdown
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Bar Button
----
diff --git a/gallery/src/pages/components/ha-bar-slider.markdown b/gallery/src/pages/components/ha-bar-slider.markdown
deleted file mode 100644
index 5d45928b4e..0000000000
--- a/gallery/src/pages/components/ha-bar-slider.markdown
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Bar Slider
----
diff --git a/gallery/src/pages/components/ha-bar-switch.markdown b/gallery/src/pages/components/ha-bar-switch.markdown
deleted file mode 100644
index b47b9bb183..0000000000
--- a/gallery/src/pages/components/ha-bar-switch.markdown
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Bar Switch
----
diff --git a/gallery/src/pages/components/ha-control-button.markdown b/gallery/src/pages/components/ha-control-button.markdown
new file mode 100644
index 0000000000..344a3ebe1d
--- /dev/null
+++ b/gallery/src/pages/components/ha-control-button.markdown
@@ -0,0 +1,3 @@
+---
+title: Control Button
+---
diff --git a/gallery/src/pages/components/ha-bar-button.ts b/gallery/src/pages/components/ha-control-button.ts
similarity index 70%
rename from gallery/src/pages/components/ha-bar-button.ts
rename to gallery/src/pages/components/ha-control-button.ts
index fcdd0f4176..0c3ad180be 100644
--- a/gallery/src/pages/components/ha-bar-button.ts
+++ b/gallery/src/pages/components/ha-control-button.ts
@@ -8,10 +8,10 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-bar-button";
+import "../../../../src/components/ha-control-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-bar-button-group";
+import "../../../../src/components/ha-control-button-group";
 
 type Button = {
   label: string;
@@ -46,7 +46,7 @@ const buttonGroups: ButtonGroup[] = [
   },
 ];
 
-@customElement("demo-components-ha-bar-button")
+@customElement("demo-components-ha-control-button")
 export class DemoHaBarButton extends LitElement {
   protected render(): TemplateResult {
     return html`
@@ -56,13 +56,13 @@ export class DemoHaBarButton extends LitElement {
           (btn) => html`
             <div class="card-content">
               <pre>Config: ${JSON.stringify(btn)}</pre>
-              <ha-bar-button
+              <ha-control-button
                 class=${ifDefined(btn.class)}
                 label=${ifDefined(btn.label)}
                 disabled=${ifDefined(btn.disabled)}
               >
                 <ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon>
-              </ha-bar-button>
+              </ha-control-button>
             </div>
           `
         )}
@@ -74,26 +74,26 @@ export class DemoHaBarButton extends LitElement {
           (group) => html`
             <div class="card-content">
               <pre>Config: ${JSON.stringify(group)}</pre>
-              <ha-bar-button-group class=${ifDefined(group.class)}>
-                <ha-bar-button>
+              <ha-control-button-group class=${ifDefined(group.class)}>
+                <ha-control-button>
                   <ha-svg-icon
                     .path=${mdiFanSpeed1}
                     label="Speed 1"
                   ></ha-svg-icon>
-                </ha-bar-button>
-                <ha-bar-button>
+                </ha-control-button>
+                <ha-control-button>
                   <ha-svg-icon
                     .path=${mdiFanSpeed2}
                     label="Speed 2"
                   ></ha-svg-icon>
-                </ha-bar-button>
-                <ha-bar-button>
+                </ha-control-button>
+                <ha-control-button>
                   <ha-svg-icon
                     .path=${mdiFanSpeed3}
                     label="Speed 3"
                   ></ha-svg-icon>
-                </ha-bar-button>
-              </ha-bar-button-group>
+                </ha-control-button>
+              </ha-control-button-group>
             </div>
           `
         )}
@@ -105,26 +105,29 @@ export class DemoHaBarButton extends LitElement {
             ${repeat(
               buttonGroups,
               (group) => html`
-                <ha-bar-button-group vertical class=${ifDefined(group.class)}>
-                  <ha-bar-button>
+                <ha-control-button-group
+                  vertical
+                  class=${ifDefined(group.class)}
+                >
+                  <ha-control-button>
                     <ha-svg-icon
                       .path=${mdiFanSpeed1}
                       label="Speed 1"
                     ></ha-svg-icon>
-                  </ha-bar-button>
-                  <ha-bar-button>
+                  </ha-control-button>
+                  <ha-control-button>
                     <ha-svg-icon
                       .path=${mdiFanSpeed2}
                       label="Speed 2"
                     ></ha-svg-icon>
-                  </ha-bar-button>
-                  <ha-bar-button>
+                  </ha-control-button>
+                  <ha-control-button>
                     <ha-svg-icon
                       .path=${mdiFanSpeed3}
                       label="Speed 3"
                     ></ha-svg-icon>
-                  </ha-bar-button>
-                </ha-bar-button-group>
+                  </ha-control-button>
+                </ha-control-button-group>
               `
             )}
           </div>
@@ -150,20 +153,20 @@ export class DemoHaBarButton extends LitElement {
         font-weight: 600;
       }
       .custom {
-        --button-bar-icon-color: var(--primary-color);
-        --button-bar-background-color: var(--primary-color);
-        --button-bar-background-opacity: 0.2;
-        --button-bar-border-radius: 18px;
+        --control-button-icon-color: var(--primary-color);
+        --control-button-background-color: var(--primary-color);
+        --control-button-background-opacity: 0.2;
+        --control-button-border-radius: 18px;
         height: 100px;
         width: 100px;
       }
       .custom-group {
-        --button-bar-group-thickness: 100px;
-        --button-bar-group-border-radius: 18px;
-        --button-bar-group-spacing: 20px;
+        --control-button-group-thickness: 100px;
+        --control-button-group-border-radius: 18px;
+        --control-button-group-spacing: 20px;
       }
-      .custom-group ha-bar-button {
-        --button-bar-border-radius: 18px;
+      .custom-group ha-control-button {
+        --control-button-border-radius: 18px;
         --mdc-icon-size: 32px;
       }
       .vertical-buttons {
@@ -184,6 +187,6 @@ export class DemoHaBarButton extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-components-ha-bar-button": DemoHaBarButton;
+    "demo-components-ha-control-button": DemoHaBarButton;
   }
 }
diff --git a/gallery/src/pages/components/ha-control-slider.markdown b/gallery/src/pages/components/ha-control-slider.markdown
new file mode 100644
index 0000000000..3825be3295
--- /dev/null
+++ b/gallery/src/pages/components/ha-control-slider.markdown
@@ -0,0 +1,3 @@
+---
+title: Control Slider
+---
diff --git a/gallery/src/pages/components/ha-bar-slider.ts b/gallery/src/pages/components/ha-control-slider.ts
similarity index 87%
rename from gallery/src/pages/components/ha-bar-slider.ts
rename to gallery/src/pages/components/ha-control-slider.ts
index 261169d6dc..5faf01a1fc 100644
--- a/gallery/src/pages/components/ha-bar-slider.ts
+++ b/gallery/src/pages/components/ha-control-slider.ts
@@ -2,7 +2,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-bar-slider";
+import "../../../../src/components/ha-control-slider";
 import "../../../../src/components/ha-card";
 
 const sliders: {
@@ -46,7 +46,7 @@ const sliders: {
   },
 ];
 
-@customElement("demo-components-ha-bar-slider")
+@customElement("demo-components-ha-control-slider")
 export class DemoHaBarSlider extends LitElement {
   @state() private value = 50;
 
@@ -86,7 +86,7 @@ export class DemoHaBarSlider extends LitElement {
             <div class="card-content">
               <label id=${id}>${label}</label>
               <pre>Config: ${JSON.stringify(config)}</pre>
-              <ha-bar-slider
+              <ha-control-slider
                 .value=${this.value}
                 .mode=${config.mode}
                 class=${ifDefined(config.class)}
@@ -94,7 +94,7 @@ export class DemoHaBarSlider extends LitElement {
                 @slider-moved=${this.handleSliderMoved}
                 aria-labelledby=${id}
               >
-              </ha-bar-slider>
+              </ha-control-slider>
             </div>
           </ha-card>
         `;
@@ -106,7 +106,7 @@ export class DemoHaBarSlider extends LitElement {
             ${repeat(sliders, (slider) => {
               const { id, label, ...config } = slider;
               return html`
-                <ha-bar-slider
+                <ha-control-slider
                   .value=${this.value}
                   .mode=${config.mode}
                   vertical
@@ -115,7 +115,7 @@ export class DemoHaBarSlider extends LitElement {
                   @slider-moved=${this.handleSliderMoved}
                   aria-label=${label}
                 >
-                </ha-bar-slider>
+                </ha-control-slider>
               `;
             })}
           </div>
@@ -141,11 +141,11 @@ export class DemoHaBarSlider extends LitElement {
         font-weight: 600;
       }
       .custom {
-        --slider-bar-color: #ffcf4c;
-        --slider-bar-background: #ffcf4c;
-        --slider-bar-background-opacity: 0.2;
-        --slider-bar-thickness: 100px;
-        --slider-bar-border-radius: 24px;
+        --control-slider-color: #ffcf4c;
+        --control-slider-background: #ffcf4c;
+        --control-slider-background-opacity: 0.2;
+        --control-slider-thickness: 100px;
+        --control-slider-border-radius: 24px;
       }
       .vertical-sliders {
         height: 300px;
@@ -165,6 +165,6 @@ export class DemoHaBarSlider extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-components-ha-bar-slider": DemoHaBarSlider;
+    "demo-components-ha-control-slider": DemoHaBarSlider;
   }
 }
diff --git a/gallery/src/pages/components/ha-control-switch.markdown b/gallery/src/pages/components/ha-control-switch.markdown
new file mode 100644
index 0000000000..ea4a4fadbf
--- /dev/null
+++ b/gallery/src/pages/components/ha-control-switch.markdown
@@ -0,0 +1,3 @@
+---
+title: Control Switch
+---
diff --git a/gallery/src/pages/components/ha-bar-switch.ts b/gallery/src/pages/components/ha-control-switch.ts
similarity index 84%
rename from gallery/src/pages/components/ha-bar-switch.ts
rename to gallery/src/pages/components/ha-control-switch.ts
index 7cf6bf64ef..8311e2a0a5 100644
--- a/gallery/src/pages/components/ha-bar-switch.ts
+++ b/gallery/src/pages/components/ha-control-switch.ts
@@ -8,7 +8,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-bar-switch";
+import "../../../../src/components/ha-control-switch";
 import "../../../../src/components/ha-card";
 
 const switches: {
@@ -39,8 +39,8 @@ const switches: {
   },
 ];
 
-@customElement("demo-components-ha-bar-switch")
-export class DemoHaBarSwitch extends LitElement {
+@customElement("demo-components-ha-control-switch")
+export class DemoHaControlSwitch extends LitElement {
   @state() private checked = false;
 
   handleValueChanged(e: any) {
@@ -56,7 +56,7 @@ export class DemoHaBarSwitch extends LitElement {
             <div class="card-content">
               <label id=${id}>${label}</label>
               <pre>Config: ${JSON.stringify(config)}</pre>
-              <ha-bar-switch
+              <ha-control-switch
                 .checked=${this.checked}
                 class=${ifDefined(config.class)}
                 @change=${this.handleValueChanged}
@@ -66,7 +66,7 @@ export class DemoHaBarSwitch extends LitElement {
                 disabled=${ifDefined(config.disabled)}
                 reversed=${ifDefined(config.reversed)}
               >
-              </ha-bar-switch>
+              </ha-control-switch>
             </div>
           </ha-card>
         `;
@@ -78,7 +78,7 @@ export class DemoHaBarSwitch extends LitElement {
             ${repeat(switches, (sw) => {
               const { id, label, ...config } = sw;
               return html`
-                <ha-bar-switch
+                <ha-control-switch
                   .checked=${this.checked}
                   vertical
                   class=${ifDefined(config.class)}
@@ -89,7 +89,7 @@ export class DemoHaBarSwitch extends LitElement {
                   disabled=${ifDefined(config.disabled)}
                   reversed=${ifDefined(config.reversed)}
                 >
-                </ha-bar-switch>
+                </ha-control-switch>
               `;
             })}
           </div>
@@ -115,11 +115,11 @@ export class DemoHaBarSwitch extends LitElement {
         font-weight: 600;
       }
       .custom {
-        --switch-bar-on-color: var(--green-color);
-        --switch-bar-off-color: var(--red-color);
-        --switch-bar-thickness: 100px;
-        --switch-bar-border-radius: 24px;
-        --switch-bar-padding: 6px;
+        --control-switch-on-color: var(--green-color);
+        --control-switch-off-color: var(--red-color);
+        --control-switch-thickness: 100px;
+        --control-switch-border-radius: 24px;
+        --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
       .vertical-switches {
@@ -140,6 +140,6 @@ export class DemoHaBarSwitch extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-components-ha-bar-switch": DemoHaBarSwitch;
+    "demo-components-ha-control-switch": DemoHaControlSwitch;
   }
 }
diff --git a/src/components/ha-bar-button-group.ts b/src/components/ha-control-button-group.ts
similarity index 63%
rename from src/components/ha-bar-button-group.ts
rename to src/components/ha-control-button-group.ts
index 030e4a9e3c..3a3df1c945 100644
--- a/src/components/ha-bar-button-group.ts
+++ b/src/components/ha-control-button-group.ts
@@ -1,8 +1,8 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 
-@customElement("ha-bar-button-group")
-export class HaBarButtonGroup extends LitElement {
+@customElement("ha-control-button-group")
+export class HaControlButtonGroup extends LitElement {
   @property({ type: Boolean, reflect: true })
   public vertical = false;
 
@@ -17,9 +17,9 @@ export class HaBarButtonGroup extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        --button-bar-group-spacing: 12px;
-        --button-bar-group-thickness: 40px;
-        height: var(--button-bar-group-thickness);
+        --control-button-group-spacing: 12px;
+        --control-button-group-thickness: 40px;
+        height: var(--control-button-group-thickness);
         width: auto;
         display: block;
       }
@@ -35,22 +35,22 @@ export class HaBarButtonGroup extends LitElement {
         width: 100%;
       }
       ::slotted(*:not(:last-child)) {
-        margin-right: var(--button-bar-group-spacing);
-        margin-inline-end: var(--button-bar-group-spacing);
+        margin-right: var(--control-button-group-spacing);
+        margin-inline-end: var(--control-button-group-spacing);
         margin-inline-start: initial;
         direction: var(--direction);
       }
       :host([vertical]) {
-        width: var(--button-bar-group-thickness);
+        width: var(--control-button-group-thickness);
         height: auto;
       }
       :host([vertical]) .container {
         flex-direction: column;
       }
-      :host([vertical]) ::slotted(ha-bar-button:not(:last-child)) {
+      :host([vertical]) ::slotted(ha-control-button:not(:last-child)) {
         margin-right: initial;
         margin-inline-end: initial;
-        margin-bottom: var(--button-bar-group-spacing);
+        margin-bottom: var(--control-button-group-spacing);
       }
     `;
   }
@@ -58,6 +58,6 @@ export class HaBarButtonGroup extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-bar-button-group": HaBarButtonGroup;
+    "ha-control-button-group": HaControlButtonGroup;
   }
 }
diff --git a/src/components/ha-bar-button.ts b/src/components/ha-control-button.ts
similarity index 78%
rename from src/components/ha-bar-button.ts
rename to src/components/ha-control-button.ts
index e8a8f6f47e..d169fb6d08 100644
--- a/src/components/ha-bar-button.ts
+++ b/src/components/ha-control-button.ts
@@ -10,8 +10,8 @@ import {
 } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 
-@customElement("ha-bar-button")
-export class HaBarButton extends LitElement {
+@customElement("ha-control-button")
+export class HaControlButton extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   @property() public label?: string;
@@ -80,10 +80,11 @@ export class HaBarButton extends LitElement {
     return css`
       :host {
         display: block;
-        --button-bar-icon-color: var(--primary-text-color);
-        --button-bar-background-color: var(--disabled-color);
-        --button-bar-background-opacity: 0.2;
-        --button-bar-border-radius: 10px;
+        --control-button-icon-color: var(--primary-text-color);
+        --control-button-background-color: var(--disabled-color);
+        --control-button-background-opacity: 0.2;
+        --control-button-border-radius: 10px;
+        --mdc-icon-size: 20px;
         width: 40px;
         height: 40px;
         -webkit-tap-highlight-color: transparent;
@@ -97,7 +98,7 @@ export class HaBarButton extends LitElement {
         justify-content: center;
         width: 100%;
         height: 100%;
-        border-radius: var(--button-bar-border-radius);
+        border-radius: var(--control-button-border-radius);
         border: none;
         margin: 0;
         padding: 0;
@@ -107,7 +108,7 @@ export class HaBarButton extends LitElement {
         overflow: hidden;
         background: none;
         z-index: 1;
-        --mdc-ripple-color: var(--button-bar-background-color);
+        --mdc-ripple-color: var(--control-button-background-color);
       }
       .button::before {
         content: "";
@@ -116,21 +117,21 @@ export class HaBarButton extends LitElement {
         left: 0;
         height: 100%;
         width: 100%;
-        background-color: var(--button-bar-background-color);
+        background-color: var(--control-button-background-color);
         transition: background-color 180ms ease-in-out,
           opacity 180ms ease-in-out;
-        opacity: var(--button-bar-background-opacity);
+        opacity: var(--control-button-background-opacity);
       }
       .button ::slotted(*) {
         transition: color 180ms ease-in-out;
-        color: var(--button-bar-icon-color);
+        color: var(--control-button-icon-color);
         pointer-events: none;
       }
       .button:disabled {
         cursor: not-allowed;
-        --button-bar-background-color: var(--disabled-color);
-        --button-bar-icon-color: var(--disabled-text-color);
-        --button-bar-background-opacity: 0.2;
+        --control-button-background-color: var(--disabled-color);
+        --control-button-icon-color: var(--disabled-text-color);
+        --control-button-background-opacity: 0.2;
       }
     `;
   }
@@ -138,6 +139,6 @@ export class HaBarButton extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-bar-button": HaBarButton;
+    "ha-control-button": HaControlButton;
   }
 }
diff --git a/src/components/ha-bar-slider.ts b/src/components/ha-control-slider.ts
similarity index 91%
rename from src/components/ha-bar-slider.ts
rename to src/components/ha-control-slider.ts
index 5854e06148..44fea413ab 100644
--- a/src/components/ha-bar-slider.ts
+++ b/src/components/ha-control-slider.ts
@@ -42,8 +42,8 @@ const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
   return Math.max(Math.min(1, (x - offset) / total), 0);
 };
 
-@customElement("ha-bar-slider")
-export class HaBarSlider extends LitElement {
+@customElement("ha-control-slider")
+export class HaControlSlider extends LitElement {
   @property({ type: Boolean })
   public disabled = false;
 
@@ -271,29 +271,29 @@ export class HaBarSlider extends LitElement {
     return css`
       :host {
         display: block;
-        --slider-bar-color: var(--primary-color);
-        --slider-bar-background: var(--disabled-color);
-        --slider-bar-background-opacity: 0.2;
-        --slider-bar-thickness: 40px;
-        --slider-bar-border-radius: 10px;
-        height: var(--slider-bar-thickness);
+        --control-slider-color: var(--primary-color);
+        --control-slider-background: var(--disabled-color);
+        --control-slider-background-opacity: 0.2;
+        --control-slider-thickness: 40px;
+        --control-slider-border-radius: 10px;
+        height: var(--control-slider-thickness);
         width: 100%;
-        border-radius: var(--slider-bar-border-radius);
+        border-radius: var(--control-slider-border-radius);
         outline: none;
         transition: box-shadow 180ms ease-in-out;
       }
       :host(:focus-visible) {
-        box-shadow: 0 0 0 2px var(--slider-bar-color);
+        box-shadow: 0 0 0 2px var(--control-slider-color);
       }
       :host([vertical]) {
-        width: var(--slider-bar-thickness);
+        width: var(--control-slider-thickness);
         height: 100%;
       }
       .slider {
         position: relative;
         height: 100%;
         width: 100%;
-        border-radius: var(--slider-bar-border-radius);
+        border-radius: var(--control-slider-border-radius);
         transform: translateZ(0);
         overflow: hidden;
         cursor: pointer;
@@ -307,18 +307,18 @@ export class HaBarSlider extends LitElement {
         left: 0;
         height: 100%;
         width: 100%;
-        background: var(--slider-bar-background);
-        opacity: var(--slider-bar-background-opacity);
+        background: var(--control-slider-background);
+        opacity: var(--control-slider-background-opacity);
       }
       .slider .slider-track-bar {
-        --border-radius: var(--slider-bar-border-radius);
+        --border-radius: var(--control-slider-border-radius);
         --handle-size: 4px;
-        --handle-margin: calc(var(--slider-bar-thickness) / 8);
+        --handle-margin: calc(var(--control-slider-thickness) / 8);
         --slider-size: 100%;
         position: absolute;
         height: 100%;
         width: 100%;
-        background-color: var(--slider-bar-color);
+        background-color: var(--control-slider-color);
         transition: transform 180ms ease-in-out;
       }
       .slider .slider-track-bar.show-handle {
@@ -413,7 +413,7 @@ export class HaBarSlider extends LitElement {
       }
 
       .slider .slider-track-cursor {
-        --cursor-size: calc(var(--slider-bar-thickness) / 4);
+        --cursor-size: calc(var(--control-slider-thickness) / 4);
         --handle-size: 4px;
         position: absolute;
         background-color: white;
@@ -452,6 +452,6 @@ export class HaBarSlider extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-bar-slider": HaBarSlider;
+    "ha-control-slider": HaControlSlider;
   }
 }
diff --git a/src/components/ha-bar-switch.ts b/src/components/ha-control-switch.ts
similarity index 79%
rename from src/components/ha-bar-switch.ts
rename to src/components/ha-control-switch.ts
index 59f851923c..881df1c42d 100644
--- a/src/components/ha-bar-switch.ts
+++ b/src/components/ha-control-switch.ts
@@ -10,8 +10,8 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-svg-icon";
 
-@customElement("ha-bar-switch")
-export class HaBarSwitch extends LitElement {
+@customElement("ha-control-switch")
+export class HaControlSwitch extends LitElement {
   @property({ type: Boolean, attribute: "disabled" })
   public disabled = false;
 
@@ -92,36 +92,36 @@ export class HaBarSwitch extends LitElement {
     return css`
       :host {
         display: block;
-        --switch-bar-on-color: var(--primary-color);
-        --switch-bar-off-color: var(--disabled-color);
-        --switch-bar-background-opacity: 0.2;
-        --switch-bar-thickness: 40px;
-        --switch-bar-border-radius: 12px;
-        --switch-bar-padding: 4px;
+        --control-switch-on-color: var(--primary-color);
+        --control-switch-off-color: var(--disabled-color);
+        --control-switch-background-opacity: 0.2;
+        --control-switch-thickness: 40px;
+        --control-switch-border-radius: 12px;
+        --control-switch-padding: 4px;
         --mdc-icon-size: 20px;
-        height: var(--switch-bar-thickness);
+        height: var(--control-switch-thickness);
         width: 100%;
         box-sizing: border-box;
         user-select: none;
         cursor: pointer;
-        border-radius: var(--switch-bar-border-radius);
+        border-radius: var(--control-switch-border-radius);
         outline: none;
         transition: box-shadow 180ms ease-in-out;
       }
       :host(:focus-visible) {
-        box-shadow: 0 0 0 2px var(--switch-bar-off-color);
+        box-shadow: 0 0 0 2px var(--control-switch-off-color);
       }
       :host([checked]:focus-visible) {
-        box-shadow: 0 0 0 2px var(--switch-bar-on-color);
+        box-shadow: 0 0 0 2px var(--control-switch-on-color);
       }
       .switch {
         box-sizing: border-box;
         position: relative;
         height: 100%;
         width: 100%;
-        border-radius: var(--switch-bar-border-radius);
+        border-radius: var(--control-switch-border-radius);
         overflow: hidden;
-        padding: var(--switch-bar-padding);
+        padding: var(--control-switch-padding);
         display: flex;
       }
       .switch .background {
@@ -130,31 +130,31 @@ export class HaBarSwitch extends LitElement {
         left: 0;
         height: 100%;
         width: 100%;
-        background-color: var(--switch-bar-off-color);
+        background-color: var(--control-switch-off-color);
         transition: background-color 180ms ease-in-out;
-        opacity: var(--switch-bar-background-opacity);
+        opacity: var(--control-switch-background-opacity);
       }
       .switch .button {
         width: 50%;
         height: 100%;
         background: lightgrey;
         border-radius: calc(
-          var(--switch-bar-border-radius) - var(--switch-bar-padding)
+          var(--control-switch-border-radius) - var(--control-switch-padding)
         );
         transition: transform 180ms ease-in-out,
           background-color 180ms ease-in-out;
-        background-color: var(--switch-bar-off-color);
+        background-color: var(--control-switch-off-color);
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
       }
       :host([checked]) .switch .background {
-        background-color: var(--switch-bar-on-color);
+        background-color: var(--control-switch-on-color);
       }
       :host([checked]) .switch .button {
         transform: translateX(100%);
-        background-color: var(--switch-bar-on-color);
+        background-color: var(--control-switch-on-color);
       }
       :host([reversed]) .switch {
         flex-direction: row-reverse;
@@ -163,7 +163,7 @@ export class HaBarSwitch extends LitElement {
         transform: translateX(-100%);
       }
       :host([vertical]) {
-        width: var(--switch-bar-thickness);
+        width: var(--control-switch-thickness);
         height: 100%;
       }
       :host([vertical][checked]) .switch .button {
@@ -189,6 +189,6 @@ export class HaBarSwitch extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-bar-switch": HaBarSwitch;
+    "ha-control-switch": HaControlSwitch;
   }
 }
diff --git a/src/components/tile/ha-tile-slider.ts b/src/components/tile/ha-tile-slider.ts
index c010f151dd..b79bd0ad2c 100644
--- a/src/components/tile/ha-tile-slider.ts
+++ b/src/components/tile/ha-tile-slider.ts
@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import "../ha-bar-slider";
+import "../ha-control-slider";
 
 @customElement("ha-tile-slider")
 export class HaTileSlider extends LitElement {
@@ -30,7 +30,7 @@ export class HaTileSlider extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-bar-slider
+      <ha-control-slider
         .disabled=${this.disabled}
         .mode=${this.mode}
         .value=${this.value}
@@ -40,24 +40,24 @@ export class HaTileSlider extends LitElement {
         aria-label=${ifDefined(this.label)}
         .showHandle=${this.showHandle}
       >
-      </ha-bar-slider>
+      </ha-control-slider>
     `;
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-bar-slider {
-        --slider-bar-color: var(--tile-slider-color, var(--primary-color));
-        --slider-bar-background: var(
+      ha-control-slider {
+        --control-slider-color: var(--tile-slider-color, var(--primary-color));
+        --control-slider-background: var(
           --tile-slider-background,
           var(--disabled-color)
         );
-        --slider-bar-background-opacity: var(
+        --control-slider-background-opacity: var(
           --tile-slider-background-opacity,
           0.2
         );
-        --slider-bar-thickness: 40px;
-        --slider-bar-border-radius: 10px;
+        --control-slider-thickness: 40px;
+        --control-slider-border-radius: 10px;
       }
     `;
   }
diff --git a/src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts b/src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts
index 6f75c8c4cf..9f2813b157 100644
--- a/src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts
+++ b/src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts
@@ -7,8 +7,8 @@ import {
   computeOpenIcon,
 } from "../../../common/entity/cover_icon";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import "../../../components/ha-bar-button";
-import "../../../components/ha-bar-button-group";
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-button-group";
 import {
   canClose,
   canOpen,
@@ -70,10 +70,10 @@ class HuiCoverOpenCloseTileFeature
     }
 
     return html`
-      <ha-bar-button-group>
+      <ha-control-button-group>
         ${supportsFeature(this.stateObj, CoverEntityFeature.OPEN)
           ? html`
-              <ha-bar-button
+              <ha-control-button
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.cover.open_cover"
                 )}
@@ -83,12 +83,12 @@ class HuiCoverOpenCloseTileFeature
                 <ha-svg-icon
                   .path=${computeOpenIcon(this.stateObj)}
                 ></ha-svg-icon>
-              </ha-bar-button>
+              </ha-control-button>
             `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
           ? html`
-              <ha-bar-button
+              <ha-control-button
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.cover.stop_cover"
                 )}
@@ -96,12 +96,12 @@ class HuiCoverOpenCloseTileFeature
                 .disabled=${!canStop(this.stateObj)}
               >
                 <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
-              </ha-bar-button>
+              </ha-control-button>
             `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
           ? html`
-              <ha-bar-button
+              <ha-control-button
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.cover.close_cover"
                 )}
@@ -111,18 +111,18 @@ class HuiCoverOpenCloseTileFeature
                 <ha-svg-icon
                   .path=${computeCloseIcon(this.stateObj)}
                 ></ha-svg-icon>
-              </ha-bar-button>
+              </ha-control-button>
             `
           : undefined}
-      </ha-bar-button-group>
+      </ha-control-button-group>
     `;
   }
 
   static get styles() {
     return css`
-      ha-bar-button-group {
+      ha-control-button-group {
         margin: 0 12px 12px 12px;
-        --button-bar-group-spacing: 12px;
+        --control-button-group-spacing: 12px;
       }
     `;
   }
diff --git a/src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts b/src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts
index ca22b29fc1..43f03fbd80 100644
--- a/src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts
+++ b/src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts
@@ -3,8 +3,8 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import "../../../components/ha-bar-button";
-import "../../../components/ha-bar-button-group";
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-button-group";
 import {
   canCloseTilt,
   canOpenTilt,
@@ -66,10 +66,10 @@ class HuiCoverTiltTileFeature
     }
 
     return html`
-      <ha-bar-button-group>
+      <ha-control-button-group>
         ${supportsFeature(this.stateObj, CoverEntityFeature.OPEN_TILT)
           ? html`
-              <ha-bar-button
+              <ha-control-button
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.cover.open_tilt_cover"
                 )}
@@ -77,12 +77,12 @@ class HuiCoverTiltTileFeature
                 .disabled=${!canOpenTilt(this.stateObj)}
               >
                 <ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon>
-              </ha-bar-button>
+              </ha-control-button>
             `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
           ? html`
-              <ha-bar-button
+              <ha-control-button
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.cover.stop_cover"
                 )}
@@ -90,12 +90,12 @@ class HuiCoverTiltTileFeature
                 .disabled=${!canStopTilt(this.stateObj)}
               >
                 <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
-              </ha-bar-button>
+              </ha-control-button>
             `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
           ? html`
-              <ha-bar-button
+              <ha-control-button
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.cover.close_tilt_cover"
                 )}
@@ -103,18 +103,18 @@ class HuiCoverTiltTileFeature
                 .disabled=${!canCloseTilt(this.stateObj)}
               >
                 <ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon>
-              </ha-bar-button>
+              </ha-control-button>
             `
           : undefined}
-      </ha-bar-button-group>
+      </ha-control-button-group>
     `;
   }
 
   static get styles() {
     return css`
-      ha-bar-button-group {
+      ha-control-button-group {
         margin: 0 12px 12px 12px;
-        --button-bar-group-spacing: 12px;
+        --control-button-group-spacing: 12px;
       }
     `;
   }
diff --git a/src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts b/src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts
index b99671770e..8089c55d23 100644
--- a/src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts
+++ b/src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts
@@ -11,8 +11,8 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import "../../../components/ha-bar-button";
-import "../../../components/ha-bar-button-group";
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-button-group";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
   canReturnHome,
@@ -168,7 +168,7 @@ class HuiVacuumCommandTileFeature
     const stateObj = this.stateObj as VacuumEntity;
 
     return html`
-      <ha-bar-button-group>
+      <ha-control-button-group>
         ${VACUUM_COMMANDS.filter(
           (command) =>
             supportsVacuumCommand(stateObj, command) &&
@@ -176,7 +176,7 @@ class HuiVacuumCommandTileFeature
         ).map((command) => {
           const button = VACUUM_COMMANDS_BUTTONS[command](stateObj);
           return html`
-            <ha-bar-button
+            <ha-control-button
               .entry=${button}
               .label=${this.hass!.localize(
                 // @ts-ignore
@@ -186,18 +186,18 @@ class HuiVacuumCommandTileFeature
               .disabled=${button.disabled || stateObj.state === UNAVAILABLE}
             >
               <ha-svg-icon .path=${button.icon}></ha-svg-icon>
-            </ha-bar-button>
+            </ha-control-button>
           `;
         })}
-      </ha-bar-button-group>
+      </ha-control-button-group>
     `;
   }
 
   static get styles() {
     return css`
-      ha-bar-button-group {
+      ha-control-button-group {
         margin: 0 12px 12px 12px;
-        --button-bar-group-spacing: 12px;
+        --control-button-group-spacing: 12px;
       }
     `;
   }