Hi, I cannot find the button-card within HACS lovelace repositories, for installation.
Is that somewhere else?
Thank you for any help.
Hello, I really liked your idea of managing with buttons like a radio button, but even with your explanations and those of RomRider, I was unable to implement the final code. Could you please share your code, automation, script and lovelace config of buttons??? Thanks.
I made this button for my AC but I wanted to display temperature and humidity values within this button (2 separate sensors) in the right superior corner next to a temperature icon. How can I do this? Tried multiple examples but always get it wrong.
This is my code:
type: 'custom:button-card'
entity: climate.ac_sala
name: AC
icon: 'mdi:fan'
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
entity: climate.ac_sala
hide:
temperature: true
icon:
cool: 'mdi:snowflake'
heat: 'mdi:radiator'
'off': 'mdi:power'
modes:
cool:
icon: 'mdi:snowflake'
heat:
icon: 'mdi:radiator'
include: true
name: 'Off'
'off':
icon: 'mdi:power-standby'
sensors:
- entity: sensor.temperaturasala
icon: 'mdi:thermometer'
name: Temperatura
- entity: sensor.humidadesala
icon: 'mdi:water-percent'
name: Humidade
step_size: 0.5
type: 'custom:simple-thermostat'
deviceID:
- this
style:
opacity: 0.9
top: 5%
title: Ar Condicionado - Sala
color: auto
size: 30%
show_state: true
styles:
card:
- border-radius: 15px
- height: 130px
- width: 130px
- '--paper-card-background-color': 'rgb(255, 251, 239)'
icon:
- padding: 0px 60px 0px 0px
name:
- padding: 0px 10px
- font-size: 13px
- font-family: Helvetica
- justify-self: start
- font-weight: bold
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
state:
- value: 'on'
styles:
name:
- color: white
state:
- color: gray
- value: 'off'
style:
- opacity: 0.4
styles:
icon:
- color: '#666666'
name:
- color: '#666666'
state:
- color: '#666666'
- value: unavailable
style:
- opacity: 0.2
styles:
icon:
- color: '#666666'
name:
- color: '#666666'
state:
- color: '#666666'
Hello, I have read almost the entire post, looked at options, but my knowledge does not give me or I do not know what I am looking for, in the image, as you can see there is a connection and a battery, I would like to be able to do in the connection if it is connected is green, and on the battery the icon changes based on its level. Can somebody help me?? thanks, I have tried several templates but none of them work.
This works for me:
- platform: template
sensors:
battery_huawei:
unit_of_measurement: '%'
value_template: >-
{% if states('sensor.lya_l29_battery_level') %}
{{ states('sensor.lya_l29_battery_level') | round }}
{% else %}
{{ states('sensor.battery_huawei') }}
{% endif %}
icon_template: >-
{% if is_state('sensor.battery_huawei', 'unknown') %}
mdi:battery-unknown
{% elif is_state('sensor.lya_l29_battery_state', 'charging') %}
mdi:battery-charging
{% elif states('sensor.lya_l29_battery_level')|float <= 5 %}
mdi:battery-outline
{% elif states('sensor.lya_l29_battery_level')|float >= 95 %}
mdi:battery
{% else %}
mdi:battery-{{(states('sensor.lya_l29_battery_level')|float / 10)|round*10}}
{% endif %}
Changes the icon of the battery based on its level and whether it’s charging or not. No colors, though. To do that, you can check out battery state card / entity row available on HACS.
Hi all
Just started to use this card.
I need some help because I can not change the color of the card or of the text when the switch-light is off.
I need the color of the text to be blue for example when the switch is off. Right now I can’t see the the icon or the text of the card (it’s light gray)
the template I use is
button_card_templates:
light:
aspect_ratio: 1/1
color: auto-no-temperature
color_type: card
tap_action:
action: toggle
hold_action:
action: more-info
show_icon: true
show_name: true
styles:
card:
- font-size: 90%
One more question is how I can change the color of the card when the switch is on. Right now it turns to yellow which is acceptable but I would like the option if possible.
@RomRider sorry to @ you. I’m creating custom svg elements and the most recent build of the card adds an ellipsis class and the svg is not vertically aligned inside it. It’s rather frustrating because this used to not have this item. Do you have any idea how to have an svg item placed in that element vertically centered? There’s about 10% of the pixel height 4px added at the bottom of this ellipsis class that I cannot remove.
Using this as a style
custom_fields:
custom_icon: |
[[[
return `
<svg viewBox="0 0 24 24">
<path fill="var(--paper-item-icon-color)" d="m4.0251 14.59c-0.33095 0.0581-0.66771 0.0755-1.0161 0.12194l-1.0626-3.1121v3.2457c-0.33095 0.03484-0.63287 0.08128-0.94641 0.12773v-5.9456h0.88258l1.2077 3.3735v-3.3735h0.93481zm1.829-3.385c0.36001 0 0.9116-0.0174 1.2425-0.0174v0.92899c-0.41226 0-0.89416 0-1.2425 0.0174v1.3819c0.54581-0.0348 1.0916-0.0813 1.6432-0.0988v0.89412l-2.5722 0.20326v-5.4869h2.5722v0.92901h-1.6432zm5.0979-1.2483h-0.96383v4.2734c-0.31354 0-0.62709 0-0.92896 0.0115v-4.285h-0.96383v-0.92903h2.8567zm1.5096 1.1845h1.2716v0.92899h-1.2716v2.1077h-0.91165v-5.1502h2.5955v0.92901h-1.6838zm3.1935 2.2238c0.52839 0.0115 1.0625 0.0522 1.5793 0.0813v0.9174c-0.83028-0.0522-1.6606-0.10447-2.5083-0.12194v-5.214h0.92898zm2.3632 1.0626c0.29612 0.0174 0.60966 0.0348 0.91158 0.0697v-5.4695h-0.91158zm4.9818-5.3998-1.1787 2.8277 1.1787 3.118c-0.34841-0.0465-0.69678-0.11032-1.0452-0.16839l-0.66769-1.7186-0.67927 1.5793c-0.33683-0.0581-0.66198-0.0755-0.99868-0.12199l1.1961-2.7231-1.08-2.7928h0.99864l0.60966 1.5619 0.65033-1.5619z" />
</svg>
`;
]]]
styles:
card:
- border-radius: 18%
- padding: 0px
- --ha-card-background: var(--primary-background-color)
custom_fields:
custom_icon:
- position: absolute
- top: 50%
- left: 50%
- width: 75%
- transform: translate(-50%, -50%)
- justify-self: center
- overflow: visible
It’s driving me nuts.
EDIT: as a band aid I added 2 pixels in the Y absolute position calc.
Hi to all,
I’ve finaly managed how to change color programmatically in svg… now I wish to applicate the same method to Label, Name and State but without rewrote the code 3 times.
How can I create a local variable and apply that to all interested elements?
This is the code (from the svg section):
- fill: |
[[[
if (entity.state === 'on')
{
if (entity.attributes.brightness <= 128)
{
return '#ffffff';
}
else if (entity.attributes.brightness > 128 && entity.attributes.brightness < 230)
{
if (entity.attributes.color_temp >= 330 && entity.attributes.color_temp <= 380)
{
return '#ffffff';
}
}
else if (entity.attributes.brightness >= 230)
{
if (entity.attributes.color_temp >= 425)
{
return '#ffffff';
}
else if (entity.attributes.color_temp >= 260 && entity.attributes.color_temp < 425)
{
return '#000000';
}
}
}
else if (entity.state === 'off')
{
return '#b3b3b3'; //grigio
}
else
{
return '#000000'; //nero
}
]]]
Hi there all,
can I put a card inside the button-card please ?
I need it cause I want to use the action:navigate for the custom:weather-card
- type: custom:button-card
aspect_ratio: 1/0.93
gridcol: 2 / 3
gridrow: 2 / 5
tap_action:
action: navigate
navigation_path: /lovelace/7/
cards:
- type: custom:weather-card
entity: weather.baubau
style: "ha-card { height: 350px; }"
name: Baubau
The button -card it’s work, but the I can’t see the weather-card…it’s empty:
Thanks all
Denis
How do you install this?
Include the card code in your `ui-lovelace-card.yaml
There is no such file, what am I supposed to do?
I suppose you need to add it to Configuration → Lovelace Dashboards → Resources (TAB), I did but I still cannot add any button cards.
Figured it out in the end, but the documentation could use an update 
Is there any way to fire a HA custom event when a button is pressed? I know that I can fire a call-service event using the tap_action of the button, but I am looking for a custom event and tap_action does not seem to give me that option.
make a script that has a custom event and fire the script.
Thanks Petro, yes I know. I was hoping that there would be a direct way. I can also use input_booleans (which I do right now).
I am actually looking for the most straight forward way to trigger Node RED events from HA buttons. A script or an input_boolean for each button unnecessarily bloats the setup, and spreads this rather simple functionality over Lovelace, YAML config and Node RED.
But I guess you are right – no more direct way in sight.
The most straight forward way to create custom events is through a script because buttons can only call services. Events are not services.
script:
event_maker:
sequence:
- event: custom_node_red_event
event_data:
x: {{ x }}
y: {{ y }}
z: {{ z }}
then use a service call
tap_action:
action: call-service
service: script.event_maker
service_data:
x: 'my x stuff'
y: 'my y stuff'
z: 'my z stuff'
That’s in fact a great idea! It did not occur to me that I could use one generic script that would tunnel ALL events into NR. The free parameters can be used to filter specific events. Thanks @petro.
Not sure if you want the background or the icon so I included both.
state:
- value: 'on'
styles:
icon:
- color: whateveryyouwant
card:
- background: whateveryyouwant
Plenty of what you want can be found in the README.md
Thank you, I changed the colors when the lights are on but my main problem is when the lights are off. Right now the background is white and the icon and letter light gray (almost white) and I can’t read them.
Alex first of all thanks a lot for this wonderful card that give a lot of possibility
I just want to make a newbie question…
Can I call 2 times services on tap-action event please ?
I make a volume button that must call one time in order to make the graphic
and second time must call for increment/decrement the volume:
If anyone want it here is the source… maybe the code can be made shorter
but like i said I’m new on lovelace story 
- type: custom:layout-card
gridcol: 2 / 3
gridrow: 3 / 4
cards:
#
- type: 'custom:button-card'
color_type: card
color: rgb(61, 183, 228)
icon: mdi:volume-plus
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.ghome1_vol
styles:
card:
- height: 80px
- width: 80px
#
- type: 'custom:button-card'
entity: input_number.ghome1_vol
icon: blank
show_name: false
show_icon: false
show_state: false
show_label: false
show_last_changed: false
styles:
card:
- height: 239px
- width: 80px
grid:
- grid-template-areas: '". v10 ."". v9 ." ". v8 ." ". v7 ."". v6 ." ". v5 ."". v4 ." ". v3 ."". v2 ." ". v1 ."'
- grid-template-columns: 7% auto 7%
- grid-template-rows: repeat(10, 30px);
- grid-row-gap: 2px
custom_fields:
v1:
- background-color: >
[[[ if (entity.state > 0) return "rgba(153, 255, 51)"; return "rgba(89, 89, 89)"; ]]]
v2:
- background-color: >
[[[ if (entity.state > 1) return "rgba(204, 255, 51)"; return "rgba(89, 89, 89)"; ]]]
v3:
- background-color: >
[[[ if (entity.state > 2) return "rgba(255, 255, 51)"; return "rgba(89, 89, 89)"; ]]]
v4:
- background-color: >
[[[ if (entity.state > 3) return "rgba(255, 204, 51)"; return "rgba(89, 89, 89)"; ]]]
v5:
- background-color: >
[[[ if (entity.state > 4) return "rgba(255, 153, 51)"; return "rgba(89, 89, 89)"; ]]]
v6:
- background-color: >
[[[ if (entity.state > 5) return "rgba(255, 102, 51)"; return "rgba(89, 89, 89)"; ]]]
v7:
- background-color: >
[[[ if (entity.state > 6) return "rgba(255, 51, 51)"; return "rgba(89, 89, 89)"; ]]]
v8:
- background-color: >
[[[ if (entity.state > 7) return "rgba(255, 31, 51)"; return "rgba(89, 89, 89)"; ]]]
v9:
- background-color: >
[[[ if (entity.state > 8) return "rgba(255, 11, 51)"; return "rgba(89, 89, 89)"; ]]]
v10:
- background-color: >
[[[ if (entity.state > 9) return "rgba(255, 0, 0)"; return "rgba(89, 89, 89)"; ]]]
custom_fields:
v1: >
[[[ return entity.state /10 ]]]
v2: >
[[[ return ' ' ]]]
v3: >
[[[ return ' ' ]]]
v4: >
[[[ return ' ' ]]]
v5: >
[[[ return ' ' ]]]
v6: >
[[[ return ' ' ]]]
v7: >
[[[ return ' ' ]]]
v8: >
[[[ return ' ' ]]]
v9: >
[[[ return ' ' ]]]
v10: >
[[[ return ' ' ]]]
#
- type: 'custom:button-card'
color_type: card
color: rgb(61, 183, 228)
icon: mdi:volume-minus
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.ghome1_vol
styles:
card:
- height: 80px
- width: 80px
#
Thanks all
Denis
3 Likes
Can I alter the format of the sensor.time within the card or is it better to do that as a sensor instead? The format that it returns is hh:mm (14:25). I would like to change it to 2:25 PM.