Nice work…
For anyone who, like me, wants to change the icon based on the state - I’ve managed to get this working by nesting this custom card inside of a conditional. Here is a sample of the settings.
- type: conditional
conditions:
- entity: switch.kitchen_pendant
state: on
card:
type: custom:button-card
entity: switch.kitchen_pendant
icon: mdi:toggle-switch
action: toggle
name: Pendants
show_state: true
- type: conditional
conditions:
- entity: switch.kitchen_pendant
state: off
card:
type: custom:button-card
entity: switch.kitchen_pendant
icon: mdi:toggle-switch-off-outline
action: toggle
name: Pendants
show_state: true
Yes, this is a lot of work for an icon change but it’ll suffice for the time being. Hopefully we’ll see this button card receive the ability to switch mdi:icons with a simple state entry the same way button coloring is applied.
3 Likes
Hi,
You could actually do this a couple of ways already. I did create this but then thought it was redundant since you can fetch the icon from the attributes. At least in my case since I was using a Cover template. So instead we added the attribute option for icon.
But if your switch is not a template switch you can create one from your current switch, https://www.home-assistant.io/components/switch.template/. Use templating to set the icon based on state. Ex.
icon_template: >-
{% if is_state('cover.garage_door', 'open') %}
mdi:garage-open
{% else %}
mdi:garage
{% endif %}
Then use icon: attribute in your card config.
If this does not help let me know. I think I saved the code to add icon_on: and icon_off option instead.
Hi
If I use this code in the “UI-editor” for lovelace… It works, but it locks up the editor so I’m not able to edit it in UI or Raw mode anymore… can only delete the card…
Anyone else with this issue?
type: 'custom:button-card'
icon: mdi:sofa
name: Library
action: service
service:
domain: scene
action: turn_on
data:
entity_id: scene.library_fullCan one call any service with this button card? Or only scripts?
I have the below in my ui-lovelace.yaml but no action is fired when pressing the button?
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: label-card
color: auto
name: Home
action: service
service:
domain: input_select
action: select_option
data:
entity_id: input_select.home_mode
option: Home
- type: "custom:button-card"
color_type: label-card
color: rgb(44, 109, 214)
name: Away
action: service
service:
domain: input_select
action: select_option
data:
entity_id: input_select.home_mode
option: Away
Intact, no matter what action I chose, nothing works?
HA version 0.82.1
Same here, i cannot style card with picture-elements… @thomasloven told me i can style only the card excluding the elements, but i still cannot get it styled…
@tobben I’ve been getting the same issue using the following, so it’s not just you:
- type: "custom:button-card"
entity: light.hallway
icon: mdi:lightbulb-outline
color: auto
color_type: icon
default_color: rgb(255, 255, 255)
action: toggle
name: Hallway
style:
- font-size: 12px
- font-weight: bold
I’m on Home Assistant v0.84.1 running in a Docker Container on a Synology NAS if that is of any help.
Edit: Updated to HA 0.84.5 and issue still persists
I did this for my lock since toggle wouldn’t work and I wanted to be able to see if it was locked or unlocked on the front end (in both a horizontal and vertical stack):
- type: conditional
conditions:
- entity: lock.schlage_deadbolt_47
state: locked
card:
type: 'custom:button-card'
action: service
service:
domain: lock
action: unlock
data:
entity_id: lock.schlage_deadbolt_47
card_style: ''
color: var(--primary-color)
color_type: icon
default_color: var(--primary-text-color)
icon: mdi:lock
name: Lock
size: 40%
- type: conditional
conditions:
- entity: lock.schlage_deadbolt_47
state: unlocked
card:
type: 'custom:button-card'
action: service
service:
domain: lock
action: lock
data:
entity_id: lock.schlage_deadbolt_47
card_style: ''
color: var(--paper-item-icon-color)
color_type: icon
default_color: var(--primary-text-color)
icon: mdi:lock-open-outline
name: Lock
size: 40%
Hope this helps anyone looking to do that.
1 Like
All my buttons appear on the same row. How can i get a row for every three buttons (for example) ?
I allready tried changing size, but that did not help.
My code
- type: horizontal-stack
cards:
- type: "custom:button-card"
#name: kamerlampen
entity: input_boolean.kamerlampen
icon: mdi:floor-lamp
size: 33%
name: Kamer
color: auto
color_type: card
default_color: rgb(255, 233, 155)
action: toggle
- type: "custom:button-card"
#name: kamerlampen
entity: group.tuinlampen
icon: mdi:floor-lamp
size: 33%
name: tuin
color: auto
color_type: card
default_color: rgb(255, 233, 155)
action: toggle
- type: "custom:button-card"
#name: kamerlampen
entity: group.slaapkamer
icon: mdi:floor-lamp
name: slpk
size: 33%
color: auto
color_type: card
default_color: rgb(255, 233, 155)
action: toggle
style:
- font-size: 12px
- font-weight: bold
- type: "custom:button-card"
entity: switch.studeerkamer
icon: mdi:lightbulb
name: study
size: 33%
action: toggle
style:
- font-size: 12px
- font-weight: bold
- type: "custom:button-card"
entity: switch.boudoir
icon: mdi:lightbulb
name: boudoir
size: 33%
action: toggle
style:
- font-size: 12px
- font-weight: bold
Start a new horizontal-stack?
I tried a new horizontal stack. But when I don’t have three buttons left, the rest get a different size. (I know I could add one or two blanc buttons), but what is more important, the buttons are not grouped anymore.
When I see some examples of other users I assume there must be another possibility to achieve my goal.
One off my buttons is slighty larger than the rest only on a small view-port (mobile). Don’t know if this is a lovelace issue, or a custom card issue though:
Works on larger view-port just fine though:
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: card
entity: switch.staande_lamp
action: toggle
name: Hoeklamp
icon: mdi:floor-lamp
color: rgb(255, 131, 0)
- type: custom:button-card
color_type: card
entity: switch.eettafel_lamp
action: toggle
name: Eettafel
icon: mdi:ceiling-light
color: rgb(255, 131, 0)
- type: custom:button-card
color_type: card
entity: switch.oude_lamp
action: toggle
name: Oude lamp
icon: mdi:lightbulb
color: rgb(255, 131, 0)
- type: custom:button-card
color_type: card
entity: switch.zithoek_lamp
action: toggle
name: Bank
icon: mdi:sofa
color: rgb(255, 131, 0)
- type: thermostat
entity: climate.verwarming
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: card
entity: switch.sonoff_1
action: toggle
name: Kerstboom
icon: mdi:pine-tree
color: rgb(255, 131, 0)
- type: custom:button-card
color_type: card
entity: light.tv_licht
action: more_info
name: TV licht
icon: mdi:television
color: rgb(255, 131, 0)
- type: custom:button-card
color_type: card
entity: light.boekenkast_licht
action: more_info
name: Boekenkast
icon: mdi:book-open
color: rgb(255, 131, 0)
- type: custom:button-card
color_type: blank-cardSomething like this? Is that what you want?
Vertical-stack, then horizontal-stack with three buttons, horizontal-stack with five buttons, etc. Last horizontal-stack has two blank-buttons (left and right).
6 Likes
this is awesome, could you share the code?
Thank you, this was indeed what I was searching for.
Sure, this is the code for my TV tab: https://pastebin.com/zH8Djv4v (too long to paste here unfortunately)
The buttons are conditional based on the Logitech Harmony activity that is active.
5 Likes
Hmm, I guess it has to do with the label being too long and not cut of. If I make the name shorter the button has the same height.
thanks a bunch, i had tiles button, but they were too clunky
@kuuji I successfully have implemented longpress functionality into this button-card. I went ahead created a PR for it: https://github.com/kuuji/button-card/pull/40
1 Like
Anybody can help figuring this out?
I’m trying to configure a virtual remote for my Harmony home remote:
Trying to follow the instructions for this custom component, this is an example of one of the buttons:
- type: "custom:button-card" entity: remote.harmony_salon icon: mdi:volume-plus service: domain: remote action: send_command data: entity_id: remote.harmony_salon device: "60012590" command: "VolumeUp"
It doesn’t work; it turns off everything when I press it…
Using the default entity button works so I know it works:
- type: entity-button entity: remote.harmony_salon icon: mdi:volume-plus tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.harmony_salon device: "60012590" command: "VolumeUp"
So what did I do wrong, how can I do the same as above using this custom component?
In the example there is no argument so I’m unsure how to apply mines (or even if it’s possible)
- 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
Anybody configured an Harmony remote using this component who could give me a hint?
Thanks in advance!