[Styling Module] Disable Card

[rafaelovandov]

Disable Card

Version: 1.0
Creator: Rafo

Important

Supported cards:

• Button

Disable Card temporarily disables interaction with the card based on specified conditions.
Useful for locking or hiding buttons when certain entity states are not met.

Optional features include:

• Adjusting the card’s opacity when disabled
• Replacing the icon, name, and state text while disabled

Ideal for visually and functionally indicating inactive or waiting components.
Configure this module via the editor or in YAML, for example:

disable_card:
  disable_opacity: YOUR_VALUE

---

🧩 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.

disable_card:
    name: "Disable Card"
    version: "1.0"
    creator: "Rafo"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1731"

    supported:
        - button

    description: |
        Disable Card temporarily disables interaction with the card based on specified conditions.
        Useful for locking or hiding buttons when certain entity states are not met.
        
        Optional features include:
          - Adjusting the card’s opacity when disabled
          - Replacing the icon, name, and state text while disabled
        
        Ideal for visually and functionally indicating inactive or waiting components.
        <br><br>
        <code-block><pre>
        disable_card:
          disable_opacity: YOUR_VALUE
        </pre></code-block>

    code: |
        ${(() => {
          const config = this.config?.disable_card || {};
          const conditions = config.disable_when;
          const shouldDisable = !conditions || checkConditionsMet([].concat(conditions), hass);
          const opacity = parseFloat(config.disable_opacity);
          const icon = config.disabled_icon;
          const name = config.disabled_name;
          const state = config.disabled_state;
        
          if (!shouldDisable) return '';
        
          const iconEl = card?.querySelector('.bubble-main-icon');
          if (icon && iconEl) {
            iconEl.setAttribute('icon', icon);
          }
        
          const nameEl = card?.querySelector('.bubble-name');
          if (name && nameEl) {
            nameEl.innerText = name;
          }
        
          const stateEl = card?.querySelector('.bubble-state');
          if (state && stateEl) {
            stateEl.innerText = state;
          }
        
          return `
            ha-card {
              pointer-events: none !important;
              opacity: ${opacity} !important;
            }
          `;
        })()}
        

    editor:
      - name: disabled_icon
        label: Icon when disabled
        selector:
          icon: {}
      - name: disabled_name
        label: Name when disabled
        selector:
          text: {}
      - name: disabled_state
        label: State when disabled
        selector:
          text: {}
      - name: disable_opacity
        label: Opacity when disabled (0 = invisible, 1 = normal)
        selector:
          number:
            min: 0
            max: 1
            step: 0.05
      - name: disable_when
        label: Disable When
        icon: mdi:cancel
        selector:
          condition: {}
      

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[antonoal]

Can this be adapted to sliders?

[rafaelovandov]

Yes! The slider is using the button card as well.

[Toarulle]

I am not sure what the issue is, but after I install this module and add it to a Switch bubble card and try to activate it, it removes itself and I need to reinstall. Is there a log or something I can try to fetch and give you?

[Clooos]

Hi! Please check this comment to fix this 🙂

#1549 (comment)

[Toarulle]

Sadly that is how my configuration.yaml is configured already, according to install instructions here. And the other two modules I've downloaded works great, only the Disable Card module is behaving like this.

[rafaelovandov]

I couldn’t reproduce the bug — I imported it as YAML and it worked fine.

[Toarulle]

Okay I have no idea. I tried again just now and it worked for some reason. Tried 10+ times yesterday.
I hereby close this "Issue". ✅

[rafaelovandov]

Nice to hear :)