Disabling Buttons | Home Assistant | Page 1

twilit ocean Nov 3, 2024, 8:48 PM

#

Is there a way to disable buttons, grey them out?

stray trail Nov 3, 2024, 9:40 PM

#

Not natively. Button cards can lock buttons, and you could do it manually with a mushroom card though

#

Natively your best choice is probably to just use the visibility functionality to hide the card rather than grey it out, if you really wanted to display a "disabled" state, have another one that is only visible when the other one is hidden, and disable all the tap actions etc for it

twilit ocean Nov 4, 2024, 1:10 AM

#

Sorry I meant I have a toggle button I want to be greyed out when set to true…

grim pewter Nov 4, 2024, 11:40 AM

#

This response won't answer your question but it'll keep the conversation going. Like hilburn mentioned: natively? No. Easily? Probably not. Do-able? I think so. You can probably make it happen with card_mod. The specifics are going to depend on the card your using. To truly disable a button, you would need to set pointer-events: none. In the example I'm about to post, I disabled the toggle but the slider still works (in an entities card with a custom:slider-entity-row.) I inspected the card and set .mdc-switch__native-control's pointer-events to none. This prevented the toggle from being clickable. The problem is, I don't know how to target that with card_mod.

#

type: entities
entities:
  - entity: light.hallway
    type: custom:slider-entity-row
    full_row: true
    toggle: true
    hide_state: true
    step: 1
    min: 1
    card_mod:
      style: |
        ha-slider {
          --md-sys-color-primary: red !important;
          {% if states(config.entity) == "on" %}
            --_active-track-color: orange;
            --_inactive-track-color: hotpink;
            --_handle-color: green;
            --_hover-handle-color: lime;
          {% else %}
            --_active-track-color: pink;
            --_inactive-track-color: black;
            --_handle-color: red;
            --_hover-handle-color: yellow;
          {% endif %}
          --_pressed-handle-color: cyan;
          --_pressed-state-layer-color: yellow;
          --_focus-handle-color: white;
          }
        ha-entity-toggle {
          --switch-unchecked-button-color: red;
          --switch-unchecked-track-color: red;
          --switch-checked-button-color: green;
          --switch-checked-track-color: green;
        }

#

With the appropriate Jinja to watch the state of a toggle helper, for example, and targeting the pointer-events properly, I think you'll be able to accomplish disabling a toggle. Perhaps @cloud holly can weigh in here. He's way better at this kind of stuff than I am.

cloud holly Nov 4, 2024, 11:44 AM

#

grim pewter This response won't answer your question but it'll keep the conversation going. ...

it's pointer-events: none and the answer you give is spot on. It can be done, and depends on the card you use.

#

I mostly set the jinja in the options itself, to keep the rest tidy

grim pewter Nov 4, 2024, 11:47 AM

#

it's pointer-events: none
Corrected the message. But how would you go about targeting .mdc-switch__native-control with all the other stuff going on in this example. (Because I think it will be relevant when it comes to styling the toggle when its disabled; well, not the slider stuff but the toggle colors.) Simply adding pointer-events: none !important to the ha-entity-toggle doesn't seem to work.

cloud holly Nov 4, 2024, 11:49 AM

#

lock_off:
  template: lock
  lock:
    enabled: >
      [[[ return entity.state === 'off'; ]]]
``` can be done on `custom:button-card` which I find a super option, only enable the lock when the entity is 'off'  (ofc, you can also use the reversed logic there

cloud holly Nov 4, 2024, 11:49 AM

#

grim pewter > it's pointer-events: none Corrected the message. But how would you go about ta...

Need to check you example there

grim pewter Nov 4, 2024, 11:49 AM

#

can be done on custom:button-card which I find a super option
That would be my perferred method. The built-in styling could accomodate disabling without the lock. (That's how I learned about pointer-events.)

cloud holly Nov 4, 2024, 12:02 PM

#

on the toggle (ha-entity-toggle) to the right of the slider: why not set display:none with a conditional template? that seems to work nicely in Inspector, allows for a bit more space for the slider. Most importantly, it doesnt tempt the user to toggle the disabled/grayed toggle, simply because it isnt there 😉

#

will experiment a bit later when home, but found these relevant entries in the card-mod thread https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1402?u=mariusthvdb

Home Assistant Community

🔹 Card-mod - Add css styles to any lovelace card

Colored checkbox: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). Track with static color, colored track’s border: - entity: input_boolean.test_boolean name: 'colored back (static), colored border' style: hui-generic-entity-row: ha-entity-toggle: $: ha-switch...

#

this is btw specific to toggles, and not perse to OP ask on Button (card) .... unless he meant the toggles on the switches ofc

#

try: card_mod: style: hui-generic-entity-row: | ha-entity-toggle { display: none; }

#

and if that works on the slider (it does here) then throw any template in there to have them hidden under certain conditions

#

            card_mod:
              style:
                hui-generic-entity-row: |
                  ha-entity-toggle {
                    display: {{'none' if is_state(config.entity,'off')}};
                  }``` 
btw, this syntax works also

        card_mod:
          style:
            hui-generic-entity-row:
              ha-entity-toggle:
                $: |
                  ha-switch {
                   display: none;
                  }```

but neither work for pointer-events: none

cloud holly Nov 4, 2024, 12:42 PM

#

hmm cant find it... posted in the community https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/7377?u=mariusthvdb

#

for a completely different perspective, one can use conditional showing on the complete config. so, why not make 2 and have only 1 show the toggle:

        entities:
          - type: conditional
            conditions:
              - condition: state
                entity: light.my_lamp
                state: 'on'
            row:
              <<: &slider
                type: custom:slider-entity-row
                entity: light.my_lamp
                name: My lamp
                colorize: true
                attribute: color_temp
              toggle: true
          - type: conditional
            conditions:
              - condition: state
                entity: light.my_lamp
                state_not: 'on'
            row:
              <<: *slider

but the answer to the why must be: because the empty slider conditional takes space in the entities card.... even when not showing. aaarrgh

twilit ocean Nov 9, 2024, 2:00 AM

#

cloud holly try:``` card_mod: style: hui-generic-e...

I don’t want to hide the button, just grey it out and disable it for the day…

#

Let me be a bit more open about my use case. I am setting up a chores toggle checklist for my kids and want to disable the toggling of the chore after it has been done. It should become toggle able again at 12am the next day…

stray trail Nov 9, 2024, 7:19 AM

#

Thinking about how to do this with native HA stuff...
Toggle Helpers: "chore X/Y/Z etc"
Buttons: one for each chore, replace the tap action with "input_boolean.turn_off" service call
Automation: At midnight, turn on all the base chores
This should prevent anyone just interacting with the dashboard from being able to turn the chores back on again during the day once they've been clicked on

twilit ocean Nov 9, 2024, 7:30 AM

#

I keep saying buttons but im using toggles...

stray trail Nov 9, 2024, 7:38 AM

#

ah, in an entities list card?

#

if you're ok with just hiding them.. you could use an entity filter card - just hide the ones that are "off" https://www.home-assistant.io/dashboards/entity-filter/

twilit ocean Nov 9, 2024, 7:52 AM

#

No I dont want to hide them...Im currently looking in the restrictions card...

#

but I dont know how to write the conditional check to start restricting button when it is true...

stray trail Nov 9, 2024, 7:56 AM

#

one sec

#

looks like it's just:

condition:
  - entity: input_boolean.chore1
  - value: off

twilit ocean Nov 9, 2024, 8:07 AM

#

How would I turn on the restriction card use only then?

stray trail Nov 9, 2024, 8:07 AM

#

what?

twilit ocean Nov 9, 2024, 8:08 AM

#

https://github.com/iantrich/restriction-card

GitHub

GitHub - iantrich/restriction-card: 🔒 Apply restrictions to Lovelac...

🔒 Apply restrictions to Lovelace cards. Contribute to iantrich/restriction-card development by creating an account on GitHub.

stray trail Nov 9, 2024, 8:10 AM

#

yeah i found it

#

i just don't understand what you mean by "turn on the use only"

twilit ocean Nov 9, 2024, 8:11 AM

#

Only have the card restricted when the toggle is true...

stray trail Nov 9, 2024, 8:14 AM

#

that's what the condition does

#

when it returns true, the lock will be active

twilit ocean Nov 9, 2024, 8:21 AM

#

What is the proper layout of the entire code to get the card to work? I'm not quite getting it...

cloud holly Nov 9, 2024, 8:23 AM

#

twilit ocean Let me be a bit more open about my use case. I am setting up a chores toggle che...

O dear , chores and kids… why bother ;/)

twilit ocean Nov 9, 2024, 8:25 AM

#

#

This does not work...

cloud holly Nov 9, 2024, 8:27 AM

#

That’s not the proper syntax, check the documentation

#

And start with a simple row without conditions, get that to work and next build on that

twilit ocean Nov 9, 2024, 8:48 AM

#

Whelp, tried multiple ways...im too tired now...ugh...

#

I am asking for help with syntax, I have no idea what I am doing...

#

Solved with help from the discussions page of the github...

#Disabling Buttons