Button card with confirmation and icon color based on state

Configuration Frontend
,
1

I have Tuya smart plug (zigbee) connected to my TV, and I do not want to accidentally turn off my TV whenever I touch that button on my dashboard. To solve this, I’ve currently added 2 buttons where the off button uses a confirmation.

It works, but the disadvantage is that I have two buttons, and no icon status color

type: horizontal-stack
cards:
  - type: button
    tap_action:
      action: call-service
      service: switch.turn_on
      service_data:
        entity_id: switch.woonkamer_tv_meubel_on_off
    icon: mdi:television
    icon_height: 75px
    name: Aan
  - type: button
    tap_action:
      action: call-service
      service: switch.turn_off
      service_data:
        entity_id: switch.woonkamer_tv_meubel_on_off
      confirmation:
        text: Are you sure you want to do it?
    icon: mdi:television-off
    icon_height: 75px
    name: Uit

Is it possible to add confirmation and icon color state to a toggle button? The flow would be:

Plug off
Icon color blue
On click, turn on the plug

Plug on
Icon color yellow
On clik, show confirmation

  • Cancel: do nothing
  • Yes: Turn off the plug
2

How about using the HACS button card, this has a confirmation option:

image
image773×401 15 KB

3

Thanks for the suggestion. But I think this isn’t the solution.

The HACS button card does have more options for styling based on state, but as far as I can see the confirmation options is the same as the default button card.

This way, the confirmation would pop-up on both on and off state, and not just when the device is on.

4

With the custom button card you can have a lock, then you need to click the entity twice before you can turn it on/off. Having a confirmation only for one of the states is not possible.

5

Change the horizontal stack to conditional and show each card depending on state of the TV.

Or add in conditional to the horizontal stack if you have other buttons as well.

1 Like
6

Worked like a charm. Thanks :smiley:

This is the code I use now

type: horizontal-stack
cards:
  - type: conditional
    conditions:
      - entity: switch.woonkamer_tv_meubel_on_off
        state: 'on'
    card:
      type: button
      entity: switch.woonkamer_tv_meubel_on_off
      icon: hass:television
      icon_height: 75px
      name: Uit
      tap_action:
        action: toggle
        confirmation:
          text: Are you sure you want to do it?
  - type: conditional
    conditions:
      - entity: switch.woonkamer_tv_meubel_on_off
        state: 'off'
    card:
      type: button
      entity: switch.woonkamer_tv_meubel_on_off
      icon: hass:television
      icon_height: 75px
      name: Aan
      tap_action:
        action: toggle
2 Likes
7

Nice one. As an afterthought, it might be worth switching the “off” to “not on” so it doesn’t disappear if it’s unavailable or some other weird state.

1 Like