Lovelace: Button card

Replace the entity portion with your switch id

This one is working. I can confirm using ā€œaction: seviceā€ cause disability to set the colors.
It solved for my switches, but I canā€™t trigger scenes without using action service call.

Solved by adding the entity (despite the action service call):

Ahh yes, thanks for the tip!

One benefit of having a separate label template is that the button colour status could be based on another entity. Using a Custom UI Tiles example:

- entity: input_boolean.window_is_open
  label_template: "return 'Windows: ' + entities['sensor.windows_open'].state;"
  icon_template: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"

@kuuji Based on the above, could the Button Card state option be expanded to include another entity, e.g.

- type: "custom:button-card"
  entity: sensor.windows_open
  name: "Windows"
  show_state: yes
  state:
    - entity_id: input_boolean.window_is_open
      value: 'on'
      color: rgb(5, 147, 255)
    - entity_id: input_boolean.window_is_open
      value: 'off'
      color: rgb(189, 255, 5)

Following on from this, is there a way to alter the icon based upon the entity state? e.g.

icon_template: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"

Thanks!

A Lovelace version of Custom UI Tiles? Could you point me to where this is please?

Unsurprisingly, the Custom UI Tiles thread on here :slight_smile:

Hi simbesh

Can you please share your code to the switching fan speed?

Thanks.

Is there a way to use this with conditional cards? I know its possible to use conditional cards plus button card but i cant use button card plus button card like a conditional

The best thing i could do is this:

  - type: horizontal-stack
    cards:
    - type: conditional
      conditions:
      - entity: switch.mqtt_switch_light_1
        state: "off"
      card:
        type: horizontal-stack
        cards:                         
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold
  - type: horizontal-stack
    cards:
    - type: conditional
      conditions:
      - entity: switch.mqtt_switch_light_1
        state: "off"
      card:
        type: horizontal-stack
        cards:                         
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold

But i have to create a conditional for each line. Is this correct?

  - type: "custom:button-card"
    entity: input_select.bedroom_fan
    icon: mdi:fan
    name: Bedroom -
    show_state: true
    action: service
    service:
      domain: input_select
      action: select_next
      data:
        entity_id: input_select.bedroom_fan
    size: 40%
    color_type: card
    state:
      - value: 'low'
        color: rgb(252, 243, 207)
      - value: 'medium'
        color: rgb(247, 219, 110)
      - value: 'High'
        color: rgb(241, 196, 15)
      - value: 'off'
        color: var(--paper-card-background-color)
1 Like

Yes would love this config option! would make the button useful for so much more!

First off - donā€™t get discouraged. Once I master the options, this is certain to be one of my most-used card types. But for right now, Iā€™ve got an issue.

I used the trick of lining up a couple blank cards on either side of the ā€œactionā€ card to make it smaller and neatly center the one I want.

However, I cannot get a color applied.

Hereā€™s my code:

 - 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
            icon: mdi:speaker
            color: rgb(28, 128, 199)
            action: service
            entity: script.vizio_toggle
          - type: "custom:button-card"
            color_type: blank-card
          - type: "custom:button-card"
            color_type: blank-card

No matter what technique I find, I canā€™t get anything but a dull grey icon.

If I try to use color_type: icon, it crashes all of Lovelace with an ā€œUnexpected Error Occurred.ā€

Iā€™m running the latest code from your git repo. And I bumped the ?v=x parameter on the include.

The card in question calls a simple service to send a ā€œPowerToggleā€ command to my Vizio soundbar, which turns itself off after 10 minutes of silence. No fancy states or anything.

What do I have wrong?

You have to change the color type from card to icon (ā€œcolor_type: cardā€ >> color_type: icon")

Still no joy.

 - type: "custom:button-card"
   color_type: icon          <--------
   color: rgb(28, 128, 199)
   icon: mdi:speaker
   action: service
   entity: script.vizio_toggle

I still get nothing but this ugly grey icon:

Screenshot_20181114_230438

Itā€™s kinda bugging me. I want/need to make a row of different-colored buttons for ease of use. But I canā€™t even color a single one!

Did you refresh your browser? Im asking this because everything is fine with your codeā€¦ I got a blue icon. Maybe you can also try the ā€œcolor_off:ā€

1 Like

Refreshed the browser, tried different browsers, viewed it on my phoneā€¦

Does HA have its own cache somewhere?

color_off was the magic formula!

Thank you, thank you!

Perhaps, because itā€™s a toggle, itā€™s never ā€œonā€ or ā€œoffā€, but somewhere in between? I dunno. Hopefully the maintainer of this add-on will read this saga and sort it out.

BUT I HAVE A BLUE ICON!

Thanks again!

Did you work this out?

Iā€™m trying to make a button that toggles two automations, but Iā€™m struggling with the show_state.

Iā€™m guessing that I need some sort of boolean or something?? anyone got any ideas?
Here is my code:

  - type: "custom:button-card"
    entity: script.wifi_away_toggle_mart
    name: "Wifi away"
    icon: mdi:wifi
    action: toggle
    show_state: true

and this is the script:

wifi_away_toggle:
  sequence:
    - service: automation.toggle
      entity_id: automation.wifi_away_mart_day
    - service: automation.toggle
      entity_id: automation.wifi_away_clare

I know this has been asked before but just curious if the long press function has been released yet?

Iā€™ve got a couple scripts i run with buttons that control my blinds. Basically, i have dual roller blinds and iā€™ve setup the following button cards.

As the open and close buttons control both blinds, i like to just open the block out blind on its own regularly, iā€™d love to be able to just hold down the open/close button and it would run a separate entity/script which would open my block out blinds only. That way i dont have to add extra buttons to run these scripts.

Keep up the good work :slight_smile:

Entitycard that is default in lovelace now has long press funcion if you need it :slight_smile: