Custom:Button-Card button is gone when off

I have a button in my custom:button-card that wont show up when its off, but when its off, it does. Any ideas why?

type: vertical-stack
cards:
  - type: markdown
    content: '## Entry Way '
    style:
      .: |
        ha-card {
          background-color: transparent;
          text-align: start;
        }
  - type: grid
    cards:
      - type: custom:button-card
        entity: light.entry_light
        name: Entry Light
        hold_action:
          action: more-info
        styles:
          name:
            - font-size: 16px
          state:
            - font-size: 16px
          card:
            - border-radius: 8%
        template:
          - base
          - icon_shade
          - light
      - type: custom:button-card
        entity: light.front_porch
        name: Outside
        hold_action:
          action: more-info
        styles:
          name:
            - font-size: 16px
          state:
            - font-size: 16px
          card:
            - border-radius: 8%
        template:
          - base
          - icon_pendant_round
          - light
    columns: 3

ScreenShots:
Light is off:

Light is on:

These are Philips Hue bulbs and I have some automation setup within the Hue app that turns them on during certain times. Could that be affecting the initial button?

Just FYI: in future you can drag and drop images into your posts.

1 Like

Updated the issue with screenshots and more detail… still having the issue. Having it with another light too FWIW

Here’s all of the lights on:

Here’s them off:

can you post your template code for the lights?

You can test by temporarily removing the template: entry on the button card code and see if they still disappear.

Remove the template worked… just weird how it works for some lights and not others.

Ive tried using the same template: that works on another light:

template:
  - base
  - icon_pendant_round
  - light

And that doesnt seem to work. I’ve tried removing individual templates (base, light, etc) to see if that worked, but it doesnt.

Here’s the light template. Sorry if its too much code

    template:
      - base
      - circle
    variables:
      circle_input: >
        [[[ return entity === undefined ||
        Math.round(entity.attributes.brightness / 2.54); ]]]
    double_tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: |
            [[[
              return !entity || entity.attributes.friendly_name;
            ]]]
          size: NORMAL
          auto_close: false
          card_mod:
            style:
              .: null
          content:
            type: custom:light-popup-card
            entity: |
              [[[ return variables.entity_id; ]]]
            icon: none
            fullscreen: false
            brightnessWidth: 100px
            brightnessHeight: 220px
            borderRadius: 1.7em
            sliderColor: '#c7c7c7'
            sliderTrackColor: rgba(25, 25, 25, 0.9)
            displayType: slider
            actionSize: 4.5em
            actionsInARow: 3
            actions:
              - action: call-service
                service: lighlight:t.turn_on
                color: '#d8d9e1'
                service_data:
                  entity_id: |
                    [[[ return variables.entity_id; ]]]
                  color_temp: 160
              - action: call-service
                service: light.turn_on
                color: '#d5b08d'
                service_data:
                  entity_id: |
                    [[[ return variables.entity_id; ]]]
                  color_temp: 250
              - action: call-service
                service: light.turn_on
                color: '#ce944b'
                service_data:
                  entity_id: |
                    [[[ return variables.entity_id; ]]]
                  color_temp: 326
                browser_mod:
                  service: browser_mod.popup
                  data:
                    title: |
                      [[[
                        return !entity || entity.attributes.friendly_name;
                      ]]]
                    size: fullscreen
                    card_mod:
                      style:
                        .: null
                    content:
                      type: custom:light-entity-card
                      entity: |
                        [[[ return variables.entity_id; ]]]
                      brightness: true
                      color_temp: true
                      white_value: true
                      full_width_sliders: false
                      hide_header: true
                      show_slider_percent: true
                      smooth_color_wheel: true
                      persist_features: true
                      consolidate_entities: true

I’d start with removing these.

card_mod:
                      style:
                        .: null

When you see a null its equivalent to an error.

I don’t use pop-up card, but I can do so testing later this evening.

Thanks for the reply, but Im not sure thats the issue. Here’s the existing code:

    cards:
      - type: custom:button-card
        entity: light.entry_light
        name: Entry Light
        hold_action:
          action: more-info
        styles:
          name:
            - font-size: 16px
          state:
            - font-size: 16px
          card:
            - border-radius: 8%
        template:
          - light
      - type: custom:button-card
        entity: light.front_porch
        name: Outside
        hold_action:
          action: more-info
        styles:
          name:
            - font-size: 16px
          state:
            - font-size: 16px
          card:
            - border-radius: 8%
        template:
          - base
          - icon_pendant_round
          - light
    columns: 3

In the code above, Entry Light is the one having issues so I copied the Outside light.front_porch card, verbatim and I get this:

Once I change the entity to entity: light.entry_light I get this:

so the new code is this, with just the entity being different.

  - type: grid
    cards:
      - type: custom:button-card
        entity: light.entry_light
        name: Outside
        hold_action:
          action: more-info
        styles:
          name:
            - font-size: 16px
          state:
            - font-size: 16px
          card:
            - border-radius: 8%
        template:
          - base
          - icon_pendant_round
          - light
      - type: custom:button-card
        entity: light.front_porch
        name: Outside
        hold_action:
          action: more-info
        styles:
          name:
            - font-size: 16px
          state:
            - font-size: 16px
          card:
            - border-radius: 8%
        template:
          - base
          - icon_pendant_round
          - light

Digging into this more… seems that the Light Template is having issues specifically for this light.

The template light uses template base which is this:

  template:
    - settings
    - tilt
    - extra_styles
  variables:
    state_on: >
      [[[ return ['on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'].indexOf(!entity || entity.state) !== -1; ]]]
    state: >
      [[[ return !entity || entity.state; ]]]
    entity_id: >
      [[[ return !entity || entity.entity_id; ]]]
    entity_picture: >
      [[[ return !entity || entity.attributes.entity_picture; ]]]
    timeout: >
      [[[ return !entity || Date.now() - Date.parse(entity.last_changed); ]]]
    is_youtube: >
      [[[
        let is_youtube = entity?.attributes?.app_id === 'com.google.ios.youtube',
            sensor = this?._config?.triggers_update,
            media_title = entity?.attributes?.media_title,
            watching_title = states[sensor]?.attributes?.title;
        if (is_youtube && media_title === watching_title) {
            return true;
        }
      ]]]
  aspect_ratio: 1/1
  show_state: true
  show_icon: false
  state_display: >
    [[[
      if (variables.state === 'off') return 'Off Text';
      // Add other conditions if necessary
      else if (variables.state === true) return variables.translate_unknown;
    ]]]
  tap_action:
    ui_sound_tablet: |
      [[[
        let screensaver = states[variables.entity_tablet] === undefined ||
            states[variables.entity_tablet].state;

        if (variables.state === 'off' && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
                entity_id: variables.entity_browser_mod,
                media_content_id: '/local/sound/on.m4a',
                media_content_type: 'music'
            });
        }
        if (variables.state_on && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
                entity_id: variables.entity_browser_mod,
                media_content_id: '/local/sound/off.m4a',
                media_content_type: 'music'
            });
        }
      ]]]
    action: toggle
    haptic: medium
  double_tap_action:
    haptic: success
  hold_action:
    action: block
  styles:
    grid:
      - grid-template-areas: |
          "icon  circle"
          "n     n"
          "s     s"
      - grid-template-columns: repeat(2, 1fr)
      - grid-template-rows: auto repeat(2, min-content)
      - gap: 1.3%
      - align-items: start
    name:
      - justify-self: start
      - line-height: 121%
    state:
      - justify-self: start
      - line-height: 115%
    card:
      - border-radius: var(--button-card-border-radius)
      - -webkit-tap-highlight-color: rgba(0,0,0,0)
      - transition: none
      - --mdc-ripple-color: >
          [[[
            return variables.state_on
                ? 'rgb(0, 0, 0)'
                : '#97989c';
          ]]]
      - color: >
          [[[
            return variables.state_on
                ? '#4b5254'
                : '#97989c';
          ]]]
      - background-color: >
          [[[
            return variables.state_on
                ? 'rgba(255, 255, 255, 0.85)'
                : 'rgba(115, 115, 115, 0.25)';
          ]]]

Im thinking somewhere in this base, the actual light is having an issue recognizing when its “OFF”

Here are the attributes of the light when its off:

max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 500
effect_list:
  - None
  - candle
  - fire
  - prism
supported_color_modes:
  - color_temp
  - xy
effect: null
color_mode: null
brightness: null
color_temp_kelvin: null
color_temp: null
hs_color: null
rgb_color: null
xy_color: null
mode: normal
dynamics: none
friendly_name: Entry Light
supported_features: 44

Here is one of my Hue bulb attribute when it is OFF and its similar to your results.

is that the correct template? I thought we were originally using

template:
          - base
          - icon_pendant_round
          - light

not

template:
    - settings
    - tilt
    - extra_styles
min_color_temp_kelvin: 2000
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 500
effect_list:
  - blink
  - breathe
  - okay
  - channel_change
  - candle
  - fireplace
  - colorloop
  - finish_effect
  - stop_effect
  - stop_hue_effect
supported_color_modes:
  - color_temp
  - xy
effect: null
color_mode: null
brightness: null
color_temp_kelvin: null
color_temp: null
hs_color: null
rgb_color: null
xy_color: null
icon: mdi:light-recessed
friendly_name: PC Spot
supported_features: 44

I just removed the unnecessary templates to troubleshoot… it seems to be angry on the base and/or light template. The odd thing is that I dont have any issues with other bulbs. I did just realize its happening with 2 other lights though, that are HUE COLOR strips.

So the commonality is the templates (base or light) and the COLOR bulbs/strips.