Lovelace: Button card

Share your Projects! Dashboards & Frontend
90

@kuuji
Trying to do this as well, for the moment I am fine with just a button to open and another button to close. How can I achieve that?

action: open_cover ??
action: close_cover ??

91

found the solution

  - type: "custom:button-card"
    action: service
    service:
      domain: cover
      action: close_cover
      data:
        entity_id: cover.xxxx
92

Well, this was just me not reading through the whole documentation.
For the sake of others that did the same, in the ui-lovelace import section, the type should be module, not JS :

resources:
  - url: /local/custom_ui/button-card.js?v=1
    type: module
93

im getting all the time error:

https://my.ip.address/local/button-card.js:169:11 TypeError: state is undefined

any help? @kuuji

94

same error here started with upgrade to 79.0 hassbian:

button-card.js?v=0.0.2:109:50 Uncaught TypeError: Cannot read property ‘state’ of undefined

95

have a look at this:

1 Like
96

Hi @kuuji
Thanks for the great work, this is super useful!

Just wondering, is it possible to add a feature to remove the border for the button/card?

97

Hey there! Thank you a lot, this is nice. Could you say, how can I make buttons smaller?

image
image1125×2436 183 KB

Here is what I have:

  - type: custom:button-card
    entity: switch.wall_switch_left_158d000245c5ca
    icon: mdi:lightbulb-on-outline
    name: 'Коридор'
    color: '#00abfb'
    size: 20%
98

Is it possible to have a button where the background color is red if the sensor im using have the state “Occupied” and green background if the state is “Vacant”.
Do i have to write some kind of template for that?

99

you’ll have to modify the .js for that

check the class: “buildCssColorAttribute”

I’d also like to color a button which represents a thermostat, so the state is “heat”, and not “on”.

2 Likes
100

This is a great custom card. I love it and used it in a lot of my lovelace views. Thank you!

There is one great enhancement which would make the button card more powerful. Could you implement a long press option like @thomasloven did for picture elements? (My Lovelace Plugins) This would be great!

1 Like
101

@kuuji would it be possible to implement templating support for the icon. If not could you add state icons for on and off?

102

Anyone tries useing mdi:numeric-1 ? It’s not working for me.

Asking because text buttons and icon buttons are not the same size.

103

Haven’t found an answer to this yet, in ‘Tiles’ I had a button that the colour reflected the on or off state of one sensor but was bound to a diffferent entity so pressing it for more_info brought up the relevant window for that, looked like this…

  - entity: sensor.hot_water_state
    icon: mdi:water
    label: " Water"
    more_info: climate.hot_water

It needs to work like this as the climate entity state is nearly always ‘AUTO’ whereas the sensor states whether it is actually on or off at the time. Anyone done it in a button card yet?

1 Like
104

Hi there,

I’m just starting to have a play with Lovelace and the custom-cards in particular. Really like it!!

I’m trying to get my cards to be transparent. Is this possible?
This is my code, but it doesn’t seem to be picking up the alpha part of the RGB value.

Any ideas?

  - type: "custom:button-card"
    color_type: card
    color: rgba(51, 72, 111, 0.24)
    entity: script.good_morning
    icon: mdi:weather-sunset-up
    name: "Good Morning"
    action: more_info
    show_state: true
    style:
      - text-transform: none
      - color: rgb(28, 128, 199)
      - font-weight: bold
105

Did you find out how to make the buttons smaller?

106

Unfortunately no. Have no idea what am I doing wrong. Will come back and try again some days later.
Please, let me know if you find the issue.

107

Just worked it out - you have to put the buttons within a vertical or horizontal stack.

See this example:

  - title: Experimental
    icon: mdi:test-tube
    background: center / cover no-repeat url("/local/bg3.jpg") fixed
    cards:
      - type: horizontal-stack
        cards:
         - type: "custom:button-card"
           color_type: card
           color: rgba(51, 72, 111, 0.24)
           entity: script.good_morning
           icon: mdi:weather-sunset-up
           name: "Good Morning"
           action: more_info
           show_state: true
           style:
             - text-transform: none
             - color: rgb(7, 57, 66)
             - font-weight: bold
         - type: "custom:button-card"
           color_type: card
           color: rgba(51, 72, 111, 0.24)
           entity: script.home_mode__day
           icon: mdi:weather-sunset-down
           name: "Dusk Lighting"
           action: more_info
           show_state: true
           style:
             - text-transform: none
             - color: rgb(7, 57, 66)
             - font-weight: bold
         - type: "custom:button-card"
           color_type: card
           color: rgba(51, 72, 111, 0.24)
           entity: script.night_night
           icon: mdi:bed-empty
           name: "Night Night"
           action: more_info
           show_state: true
           style:
             - text-transform: none
             - color: rgb(7, 57, 66)
             - font-weight: bold
1 Like
108

Is anyone using lovelace with ‘Fully Kiosk Browser’?

I’m trying this out, but the custom card .js files don’t seem to be loading. It works on the same device with Chrome.

109

Is there any method, where after clicking on the button, next button are shown underneath?
Example, after clicking “living room” button, underneath i have buttons from light switches, info from all sensors?