How to mark a custom button card as "disabled" so it is grayed out and cannot be clicked? (actually, how to implement radio buttons)

Is it possible? I basically want to mark the button UI element as “disabled” if an entity has a certain value, otherwise enabled.
I am aware of the “lock” functionality but that has a different purpose and works differently.

What I’m actually trying to achieve is the following. I have 3 states: “A”, “B” and “OFF”. Currently, the way I’m expressing is with 3 buttons. First button makes the state A, second makes the state B and the third makes it “OFF”. Once I click “A” I want to commiunicate that A is already active so I want to disable the A button. Etc.

I can accopmlish this with a drop-down but I dislike that it’s more clicking.

Alternatively, I could accomplish it with 2 sliders as well (and of course make it impossible to have both slides to on which isn’t hard to do).

Finally, the ideal solution would be to have 3 radio buttons but seems HA doesn’t have support for radio buttons.

Seems like this is a great solution. Thanks to the person who did it.
I think another option would be if the “tile” card had a way to create some custom “features” on it as most features are essentially radio buttons. Not sure how I can leverage that, however.

Got all those ideas from the following place - https://www.reddit.com/r/homeassistant/comments/1avrcu5/noob_help_wanting_to_set_radio_buttons_to_only/

Any active UI element may be greyed out by setting a corr. CSS color property; making it “disabled” can be achieved by setting a CSS “pointer-event: none” property.

1 Like

Thanks. You are actually answering the question I’m asking in the title so I will mark your solution as correct. But what I was actually after (the classic XY problem) is what I answered.

Thanks for sharing this info – it’ll be useful in general anyway!