Toggle button slider at the right side

[Senth]

Toggle Button

Version: 1.0
Creator: Senth

Important

Supported cards:

• Button

Adds a Lovelace toggle switch to the right of the card and disables the background coloring.

No configuration needed, or supported.

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

toggle_button:
    name: "Toggle Button"
    version: "1.0"
    creator: "Senth"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button

    description: |
        Adds a lovelace toggle switch to the right of the card and disables the background coloring.
        <br><br>
        <code-block><pre>
        toggle_button: 
            # Your configuration here
        </pre></code-block>

    code: |
        .bubble-background {
          background: 0 !important;
        }
        
        .bubble-content-container > ha-switch {
          position: absolute;
          right: 8px; top: 50%;
          transform: translateY(-50%);
        }
        
        ${(() => {
          const container = card.querySelector('.bubble-content-container');
          if (!container) return '';
          
          let sw = container.querySelector('ha-switch');
          if (!sw) {
            sw = document.createElement('ha-switch');
            container.appendChild(sw);
        
            // when the user clicks the knob, call HA toggle
            sw.addEventListener('click', e => {
              e.stopPropagation();
              hass.callService('homeassistant', 'toggle', {
                entity_id: entity
              });
            });
          }
        
          sw.checked = (state === 'on');
        })()}

---

Screenshot:

On

Off