Lovelace: Button card

Share your Projects! Dashboards & Frontend
6931

Thank you! This worked for me.

6932

if ‘source’ is an attribute of the media_player entity you shouldnt need the brackets around it, and

[[[ return states['media_player.android_tv_192_168_2_123'].attributes.source == 'Google TV Launcher'; ]]]

should work properly.

this is the regular syntax:

icon: >
  [[[ return states['climate.front_room'].attributes.hvac_action == 'heating'
      ? 'mdi:radiator' : 'mdi:radiator-disabled'; ]]]

or some variables you might have in your system to test:

variables:
  installed: >
    [[[ return states['update.home_assistant_supervisor_update'].attributes.installed_version; ]]]
  latest: >
    [[[ return states['update.home_assistant_supervisor_update'].attributes.latest_version; ]]]

the you need that html syntax (eg with serving image files) there’s a bit of care you need to show using the various quotes:

styles:
  card:
    - background-image: >
        [[[ return `url("${states['sensor.moon_phases'].attributes.entity_picture}")`; ]]]

but even there you see the attribute simply listed after the dot.

6933

Ever figure this out?

6934

I have the same problem, I also get “Failed to call service switch/turn_on. connection lost”. Definitely used to work before.

      - type: custom:button-card
        entity: switch.wohnzimmer_heizung_switch_7
        show_name: true
        name: Window Detection
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:window-open-variant
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.wohnzimmer_heizung_switch_7

Any help appreciated.

6935

This never worked as button-card never supported data: you should use service_data instead of data. Or use the last dev version which now supports this format. :smiley:

6936

Hi,

not only does the official example (first post) use exactly that syntax, I tried it with 4.0.0-dev.12 yesterday, I still get same error:

From official example in first post:

- type: horizontal-stack
  cards:
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: card
      color: rgb(223, 255, 97)
      icon: mdi:volume-plus
      action: service
      service:
        domain: media_player
        action: volume_up
        data:
          entity_id: media_player.livimg_room_speaker
    - type: "custom:button-card"
      color_type: card
      color: rgb(223, 255, 97)
      icon: mdi:volume-minus
      action: service
      service:
        domain: media_player
        action: volume_down
        data:
          entity_id: media_player.livimg_room_speaker
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: blank-card

EDIT: And yes, it worked before, it stopped working only recently

6937

Please read the documentation…

      action: call-service
      service: media_player.volume_down
      service_data: # or data with the latest beta
        entity_id: media_player.livimg_room_speaker
6938

Hi,

I tried the syntax from github now. Syntax from first post has been replaced, but I still get “Failed to call service switch/turn_on. connection lost”:

    cards:
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_9
        show_name: true
        name: Anti Freeze
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:snowflake
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: call-service
        service: input_boolean.toggle
        service_data:
          entity_id: switch.wohnzimmer_thermostat_switch_9

Sorry, this really used to work, and it really doesn’t anymore. Hope anyone can confirm this.

6939

you’re missing tap_action

    cards:
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_9
        show_name: true
        name: Anti Freeze
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:snowflake
        size: 16%
        styles:
          name:
            - font-size: 15px
        tap_action:
          action: call-service
          service: input_boolean.toggle
          service_data:
            entity_id: switch.wohnzimmer_thermostat_switch_9

also input_boolean.toggle for a switch entity?

6940

Hi,
I added tap_action now, and the connection lost is gone. However, now it doesn’t toggle the color anymore, nor does it actually change the entity state.

The behaviour and examples for this card changed, I mean, even in this thread started by @kuuji, my old syntax was totally normal.
Quite annoying.

6941

That post is from 5y ago (I can’t edit it because it’s not mine)… I’ve taken over the development of the card several years ago. The updated documentation is on GH (master branch for stable and dev branch for dev versions)

1 Like
6942

First of all, thank you for the work.
I have 1200 lines of yaml for 8 TRV Thermostats with 6 buttons each, that code used to work. I may have been using a very old version of this card before and updated it without noticing the break.
I guess I will try to get the old version running again.
EDIT: It’s 1200 lines because it has all kinds of other sliders, knobs and graphs in it, it would be a lot of work to replace all the affected lines.

6943

I don’t think this has anything to do with button-card but with the entity itself and something that has changed in HA.

I use LedFX integration and since I updated to 2023.7.x (from 2023.4) my LedFX toggles have the same issue (exact same error as what you have). If I go to my entities page and try toggling there, it shows the issue as well. Which in my case means it can’t be button-card since it’s not even being used there.

Can you try this out too? Go to your entities page (so outside of Dashboard/Lovelace) and see if controlling the entity there works. If that gives the same error, then it has nothing to do with button-card, but it’s an integration or HA issue.

1 Like
6944

if anything, you should update to the latest, and stop using the wrong service for the domain at hand.

as Jerome has also said above.

  tap_action:
    action: call-service
    service: switch.toggle
    service_data:
      entity_id: switch.wohnzimmer_thermostat_switch_9

if you move to version 4 (now in beta) you can also use the official target and/or data, instead of service_data.

If that still doesnt work, something’s amiss with your entities, as ASNNetworks suggests (or, maybe somewhere in the rest of your 1200 lines… :wink: )

using many many of these toggles, and noise whatsoever…

6945

Update,

I realized that the custom zha quirk, that I use for my TRV Thermostat was broken.

Even weirder, after I updated the quirk all buttons actually work again … with the old syntax.

So if anyone is interested, this works with the current 3.5 Version of custom Button Card:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: auto
  grid-template-areas: |
    "Master Master Master"
    "Master2 Master2 Master2"
    "Outside Outside Outside"
    "Area1 Area1 Area1"
    "Mmain1 Mmain2 Mmain3"
    "Mmain11 Mmain22 Mmain33"
    "Mmain111 Mmain222 Mmain333"
    "Area2 Area2 Area2"
    "Area21 Area22 Area23"
    "Area211 Area222 Area233"
    "Area2111 Area2222 Area2333"
    "Area3 Area3 Area3"
    "Area31 Area32 Area33"
    "Area311 Area322 Area333"
    "Area3111 Area3222 Area3333"
    "Flur1 Flur2 Flur3"
cards:
  - type: custom:simple-thermostat
    entity: climate.wohnzimmer_thermostat_thermostat_2
    header:
      name: Wohnzimmer
    view_layout:
      grid-area: Mmain1
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 33% 33% 33%
      grid-template-rows: auto
      grid-template-areas: |
        "button1 button2 button3"
        "button1 button2 button3"
    cards:
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_9
        show_name: true
        name: Anti Freeze
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:snowflake
        size: 16%
        styles:
          name:
            - font-size: 15px
        tap_action:
          action: call-service
          service: input_boolean.toggle
          service_data:
            entity_id: switch.wohnzimmer_thermostat_switch_9
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_12
        show_name: true
        name: Away Mode
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:logout
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: call-service
        service: input_boolean.toggle
        service_data:
          entity_id: switch.wohnzimmer_thermostat_switch_12
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_8
        show_name: true
        name: Child Lock
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:human-male-child
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: call-service
        service: input_boolean.toggle
        service_data:
          entity_id: switch.wohnzimmer_thermostat_switch_8
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_10
        show_name: true
        name: Limescale Protection
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:timer-alert-outline
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: call-service
        service: input_boolean.toggle
        service_data:
          entity_id: switch.wohnzimmer_thermostat_switch_10
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_11
        show_name: true
        name: Schedule on/off
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:timetable
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: call-service
        service: input_boolean.toggle
        service_data:
          entity_id: switch.wohnzimmer_thermostat_switch_11
      - type: custom:button-card
        entity: switch.wohnzimmer_thermostat_switch_7
        show_name: true
        name: Window Detection
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:window-open-variant
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: call-service
        service: input_boolean.toggle
        service_data:
          entity_id: switch.wohnzimmer_thermostat_switch_7
    view_layout:
      grid-area: Mmain11
  - type: entities
    entities:
      - entity: number.wohnzimmer_thermostat_number_temperature_calibration_2
        name: Wohnzimmer Calibration
    view_layout:
      grid-area: Mmain111
  - type: custom:simple-thermostat
    entity: climate.tobi_thermostat_thermostat
    header:
      name: Tobi
    view_layout:
      grid-area: Mmain2
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 33% 33% 33%
      grid-template-rows: auto
      grid-template-areas: |
        "button1 button2 button3"
        "button1 button2 button3"
    cards:
      - type: custom:button-card
        entity: switch.tobi_thermostat_switch_3
        show_name: true
        name: Anti Freeze
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:snowflake
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.tobi_thermostat_switch_3
      - type: custom:button-card
        entity: switch.tobi_thermostat_switch_6
        show_name: true
        name: Away Mode
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:logout
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.tobi_thermostat_switch_6
      - type: custom:button-card
        entity: switch.tobi_thermostat_switch_2
        show_name: true
        name: Child Lock
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:human-male-child
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.tobi_thermostat_switch_2
      - type: custom:button-card
        entity: switch.tobi_thermostat_switch_4
        show_name: true
        name: Limescale Protection
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:timer-alert-outline
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.tobi_thermostat_switch_4
      - type: custom:button-card
        entity: switch.tobi_thermostat_switch_5
        show_name: true
        name: Schedule on/off
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:timetable
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.tobi_thermostat_switch_5
      - type: custom:button-card
        entity: switch.tobi_thermostat_switch
        show_name: true
        name: Window Detection
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:window-open-variant
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.tobi_thermostat_switch
    view_layout:
      grid-area: Mmain22
  - type: entities
    entities:
      - entity: number.tobi_thermostat_number_temperature_calibration
        name: Tobi Calibration
    view_layout:
      grid-area: Mmain222
  - type: custom:simple-thermostat
    entity: climate.kuche_thermostat_thermostat_3
    header:
      name: KĂźche
    view_layout:
      grid-area: Mmain3
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 33% 33% 33%
      grid-template-rows: auto
      grid-template-areas: |
        "button1 button2 button3"
        "button1 button2 button3"
    cards:
      - type: custom:button-card
        entity: switch.kuche_thermostat_switch_15
        show_name: true
        name: Anti Freeze
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:snowflake
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.kuche_thermostat_switch_15
      - type: custom:button-card
        entity: switch.kuche_thermostat_switch_18
        show_name: true
        name: Away Mode
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:logout
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.kuche_thermostat_switch_18
      - type: custom:button-card
        entity: switch.kuche_thermostat_switch_14
        show_name: true
        name: Child Lock
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:human-male-child
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.kuche_thermostat_switch_14
      - type: custom:button-card
        entity: switch.kuche_thermostat_switch_16
        show_name: true
        name: Limescale Protection
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:timer-alert-outline
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.kuche_thermostat_switch_16
      - type: custom:button-card
        entity: switch.kuche_thermostat_switch_17
        show_name: true
        name: Schedule on/off
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:timetable
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.kuche_thermostat_switch_17
      - type: custom:button-card
        entity: switch.kuche_thermostat_switch_13
        show_name: true
        name: Window Detection
        show_state: false
        color_type: card
        color: rgb(254, 129, 0)
        icon: mdi:window-open-variant
        size: 16%
        styles:
          name:
            - font-size: 15px
        action: service
        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id: switch.kuche_thermostat_switch_13
    view_layout:
      grid-area: Mmain33
  - type: entities
    entities:
      - entity: number.kuche_thermostat_number_temperature_calibration_3
        name: KĂźche Calibration
    view_layout:
      grid-area: Mmain333

EDIT: The above code uses, both old and new syntax, starts using old code after “wohnzimmer”, yet all buttons work.

6946

and yet, that old syntax is using the incorrect service for the domain. Even if it works, why would you use that? just fix it and be sure any other issues are not caused by that.

it is rather remarkable though, because this:

        service:
          domain: input_boolean
          action: toggle
          data:
            entity_id:

was only introduced 2 days ago in the still beta 4 version… up to that version, you’d need service_data for the service call

btw, please dont post these huge code blocks, as no-one will check your complete config. If you want to focus on a specific detail, please post that only…

1 Like
6947

I will in time update everything, don’t really want to go into this again. Took me from 18th of July until today to fix my own stuff, I really want to avoid that in the future.

6948

:tada: custom:button-card got some well required :heart:
A lot of new shiny features and support for the latest home assistant features (requires HA >= 2023.7):

  • translations do work again
  • a lot of template helpers
  • support for the new icons
  • support for the new actions, including assist
  • variables dependencies
  • And many more :slight_smile:

If you find any bug, please open a GH issue!

4.0.0 (2023-07-29)

:warning: BREAKING CHANGES

  • helpers: If you were using any of the beta before 4.0.0-dev14. Please replace all the calls to helper functions with helpers.xxx for eg. helpers.relativeTime(entity.state) or helpers.localize(entity)
  • hacs: Minimum required HA Version is now 2023.7
  • actions: Requires HA 2023.4 minimum. Support for the new action format (target is also be supported), service_data should be renamed to data (but it still works with the old format)
  • icons: This might break your card-mod setup
  • this might break some of your color settings

Features

  • action: repeat_limit for hold_action (73c216f), closes #564 #555
  • actions: Support for the new action (assist) and all the future ones (d9c17a4), closes #711 #685
  • custom_fields: Add do_not_eval to stop evaluating js templates in an embedded card (1638cf8)
  • helpers: all template functions are now available through the helpers object (f22ed69)
  • icons: replace ha-icon with ha-state-icon to follow new HA’s icons per domain automatically (ab6a3f5)
  • templates: new relativeTime function to display a relative time in a template and update it automatically (965a3d7), closes #701
  • templates: New date and time format helpers (9b4fb05)
  • variables: A variable can depend on another variable based on their name’s alphabetical order (8cddccb), closes #656
  • Force the numeric_precision for states which are numbers (24d75c2)
  • new helper functions for date/time in templates (2b75993), closes #701
  • Support for localization in templates (5de2dc9)

Bug Fixes

  • *_action more-info entity as a template was not evaluated (02441b2), closes #734
  • group_expand now works even if the entity is not a group.xxx (f192ded), closes #645
  • Color are now aligned with HA > 2022.12 (685d55e), closes #635
  • custom fields would sometime throw unsafeHTML errors (c67e1d5), closes #725
  • ha-icon (if in custom_fields) size was weird (a448c8e)
  • ha-state-icon CSS selector was wrong (a1bb39a)
  • icon would be cut with card height defined (19f8393), closes #731
  • localization fix (02dfab3), closes #685 #693
  • lock icon was displaying over more-info dialog (bf075b0), closes #694
  • lock would go out of the button (0b3e4d3)
  • non string fiels would error with an unsafeHTML error (d65c347), closes #725
  • numerical states would not follow HA’s format (72d7c41), closes #662
  • optimize contrast color compute (35109c3)
  • relativeTime didn’t support to set the first letter uppercase (f8b9b09), closes #735
  • Some cards with child cards wouldn’t be clickable (9f21c58)
  • text/icon contrast when using label-card (01e199b)
  • variable which were objects were only evaluated once (e40bda9)
  • templates: variables was undefined if none where provided. (fad332b), closes #718
  • tooltip would show over everything (1bc8f99)
  • color: main config color was broken (b93c996)
  • hacs: minimum HA version 2023.7 (db3b394)
  • templates: don’t use the numeric_precision from the card config for localize in js templates by default (2cc384f)
17 Likes
6949

Thanks for giving button-card some :heart:, much appreciated! :slight_smile: :+1:

I mean, it’s THE most used and needed card in HA.

4 Likes
6950

Guys, just a quick question, i grabbed code from someone, now since release 4.0.0 , all my icons are white, when an entity is turned on, how can i change it back to the real state icon? i us declutter card, here are values for on/off

Not sure what i need to change?

  state:
    - value: "on" 
      '[[variable]]': '[[spin]]'  
      styles:
        card:
          - --ha-card-background: '[[on_card_color]]'
          - opacity: '[[opacity_on]]'
        name:
          - color: '[[on_name_color]]'
        state:
          - color: '[[on_state_color]]'
        lock:
          - color: var(--lock-color-on)
        label:
          - color: '[[on_label_color]]'
    - value: "off"
      '[[off_variable]]': '[[off_spin]]'
      styles:
        card:
          - opacity: '[[opacity]]'
        icon:
          - color: '[[off_icon_color]]'
        name:
          - color: '[[off_name_color]]'
        state:
          - color: '[[off_state_color]]'
        label:
          - color: '[[off_label_color]]'
          - font-size: '[[label_font_size]]'
          - font-weight: '[[label_font_weight]]'
        lock:
          - color: var(--lock-color-off)

For my default, i have the icon on “auto”

default:
  # Button Options
  - lock: false
  - aspect_ratio: 1/1
  - opacity: 0.4
  - opacity_on: 1.0
  - border-radius: 12px

  # Icon Options
  - color: auto
  - size: 25%
  - margin-right: 60px
  - margin-left: 0px
  - variable: spin
  - spin: false
  - off_variable: spin
  - off_spin: false

Shouldnt the “auto” option give the real color of the light?

Edit : NM, seems to be a bug in 4.0.0 release