Custom Button Card - colour based on unavailable state

Configuration Frontend
1

Hello,

Hoping to receive some help please.

I have successfully created a custom: button card that shows my window sensors when they are ‘on’ or ‘off’ as green or red flashing depending on this state. Sometimes the sensors go offline (unavailable) which is annoying, but also misleading when I check my dashboard. I want to be able to show the unavailable state as a different colour, so that I can quickly view my sensors and understand if I should be concerned about whether they are open or closed or just disconnected. Please can I have some assistance?

IMG_9346
IMG_93461036×1676 229 KB

2

Welcome to the community forums!

First of all: Please post code using the cog wheel icon —> preformatted text. It’s way easier for others to help.

You can use state values in custom:button-card:


type: custom:button-card
entity: binary_sensor.eingangstur
state:
  - value: 'on'
    styles:
      card:
        - background: orange
  - value: 'off'
    styles:
      card:
        - background: white
  - value: unavailable
    styles:
      card:
        - background: red

or a template instead of state values:


type: custom:button-card
entity: binary_sensor.tageslicht
triggers_update: all
styles:
  card:
    - background: |
        [[[
          return entity?.state == 'on' ? 'orange' 
          : entity?.state == 'off' ? 'white'
          : 'red';
        ]]]