you can simply customize your entities, the button card will show the icons as set per entity.
or set them on the button:
- type: custom:button-card
template: button_light
name: Dining
icon: 'mdi:silverware'
entity: light.dining_table
above is for use with templates, but without decluttering cards…
I’m attempting to use the custom_fields option. I used the example from the readme.md that has the green or red circle by the lightbulb. But I cannot for the life of me get it to work. I replaced the sensor entity name with one that does work in HA. The code i plugged in is:
- type: 'custom:button-card'
icon: 'mdi:lightbulb'
aspect_ratio: 1/1
name: Nb lights on
styles:
grid:
- position: relative
custom_fields:
notification:
- background-color: >
[[[
if (states['sensor.prob_sleeping'].state == 0)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 60%
- top: 10%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
custom_fields:
notification: >
[[[ return (states['sensor.prob_sleeping'].state) ]]]
To help debug, I added a second card that is similar, but uses a template to show the state of the sensor. The templating doesn’t activate, and just shows the code within the template. The yaml code for this one is:
- type: 'custom:button-card'
icon: 'mdi:lightbulb'
aspect_ratio: 1/1
name: Nb lights on
show_label: true
label: >
[[[
return 'Probability: ' + states['sensor.prob_sleeping'].state;
]]]
This makes me think maybe something is wrong with the way I’m using the template (?)
The screenshots of the two cards are:
Can someone help me figure out what i’m doing wrong? I downloaded the most recent version of button_card.js. The resources portion of my ui-lovelace.yaml file is:
resources:
- type: module
url: /local/button-card.js
- type: js
url: /local/vertical-style-card.js?v=0.1
- type: js
url: /local/vertical-stack-in-card.js?v=0.0.9
Thanks for sharing! 
Hi all
I would like to create a custom_field that can change values on changing some entity attributes
These are some Life360 attributes:
driving: false
moving: false
speed: 0
So I would like to have the custom_field show
Status: driving - 10 km/h
if the driving: attribute is true
and
Status: moving - 2 km/h
if the moving: attribute is true
Is it possible?
This is one of my custom_fields
source: >
[[[
return `<ha-icon
icon="mdi:source-branch"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Source: <span style="color: var(--text-color-sensor);">${states['device_tracker.xxxx'].attributes.source_type}</span></span>`
]]]
Thanks
I am trying to create a card for severe weather alerts (don’t worry I am not in a hurricane zone). I haven’t done too bad, but I would like to be able to increase the icon size and move the text further to the left. I assume it has to do with padding.
I would also like to just show the “summary” as the tap_action. Is that possible?
type: 'custom:button-card'
layout: icon_state
entity:
- sensor.weatheralerts
color_type: card
color: red
show_name: false
show_state: true
tap_action:
action: more-info
styles:
state:
- text-transform: uppercase
- font-weight: bold
- justify-self: start
card:
- height: 60px
icon:
- margin-left: '-25%'
Thanks
That definitely looks like a caching issue. Change the url to:
resources:
- type: module
url: /local/button-card.js?v=abc
And hard refresh your browser (CTRL+R // CMD + R)
This is what the template should look like (add the brackets and change the device_tracker):
let speed = states['device_tracker.life360'].attributes.speed;
if (states['device_tracker.life360'].attributes.moving) return `Status: moving - ${speed} km/h`
else if (states['device_tracker.life360'].attributes.driving) return `Status: driving - ${speed} km/h`
else return "Status: Standstill"
Add this to your card:
icon: 100%
styles:
grid:
grid-template-areas: "i s" "n n" "l l";
# Change the %age below to modify the blank space between the text and the icon
grid-template-columns: 20% 1fr;
grid-template-rows: 1fr min-content min-content;
I don’t understand what you mean by showing the summary?
Getting this error when I paste it:
can not read an implicit mapping pair; a colon is missed at line 22, column 38: … rid-template-areas: “i s” “n n” “l l”; ^
type: 'custom:button-card'
layout: icon_state
entity:
- sensor.weatheralerts
color_type: card
color: red
icon: 100%
show_name: false
show_state: true
tap_action:
action: more-info
styles:
state:
- text-transform: uppercase
- font-weight: bold
- justify-self: start
card:
- height: 60px
icon:
- margin-left: '-25%'
grid:
grid-template-areas: "i s" "n n" "l l";
grid-template-columns: 20% 1fr;
grid-template-rows: 1fr min-content min-content;
In the “more_info” screen there is a section called “summary”. Was hpoing it would just be possible to show that with “tap_action” rather than the whole more_info box.
Hi, i have changed the view, thank you for your help.
This is the old view:
This is new view:
There is 3 things that i need help with:
- type: entity-button
entity: switch.desktop
icon: mdi:desktop-tower
name: PC
show_name: false
hold_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.wake_pc
i tried do the same thing in new view without success, this is current view for the pc in updated version, how can set that a long press will do the same thing. current code:
- type: custom:decluttering-card
template: button
variables:
- name: PC
- entity: switch.desktop
- icon: mdi:desktop-tower
- type: custom:button-card
entity: fan.ceiling_fan
icon: mdi:fan
show_state: false
show_name: false
state:
- value: 'on'
spin: true
now its not, everything that i tried wasn’t working, current code:
- type: custom:decluttering-card
template: button
variables:
- name: Ceilling Fan
- entity: fan.ceiling_fan
- icon: mdi:fan
old view code:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: entities
title: Sensors
show_header_toggle: false
entities:
- entity: light.gateway_light_34ce00fa5d87
name: Xiaomi Gateway Bedroom
- entity: light.gateway_light_04cf8c9829a2
name: Xiaomi Gateway Storage Room
- entity: binary_sensor.door_window_sensor_158d0001d68618
secondary_info: last-changed
name: Front Door
- entity: binary_sensor.smoke_sensor_158d0002b223fd
secondary_info: last-changed
name: Fire Alarm
- entity: binary_sensor.motion_sensor_158d00030518db
secondary_info: last-changed
- entity: binary_sensor.motion_sensor_158d0003051953
secondary_info: last-changed
- entity: binary_sensor.motion_sensor_158d000113e40d
secondary_info: last-changed
name: Motion Sensor Living Room
- entity: binary_sensor.motion_sensor_158d0001e50fc6
secondary_info: last-changed
name: Motion Sensor Bedroom
new code :
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
border-radius: 10px
card:
type: "custom:button-card"
color_type: label-card
color: rgb(255,250,205)
aspect_ratio: 15/1
name: Sensors
styles:
name:
- font-weight: bold
- font-size: 22px
- type: horizontal-stack
cards:
# - type: custom:decluttering-card
# template: sensor
# variables:
# - name: Front Door
# - entity: binary_sensor.door_window_sensor_158d0001d68618
# - secondary_info: last-changed
# - icon: mdi:door
# - type: custom:decluttering-card
# template: sensor
# variables:
# - entity: binary_sensor.smoke_sensor_158d0002b223fd
# - secondary_info: last-changed
# - name: Fire Alarm
# - icon: mdi:shield-check
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d00030518db
secondary_info: last-changed
- name: Master Bedroom
- icon: mdi:motion-sensor
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d0003051953
- name: Storage Room
secondary_info: last-changed
- icon: mdi:motion-sensor
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d000113e40d
- name: Living Room
secondary_info: last-changed
- icon: mdi:motion-sensor
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d0001e50fc6
- name: Bedroom
secondary_info: last-changed
- icon: mdi:motion-sensor
picture:
below the decluttering_templates.yaml
button:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
secondary_info: last-changed
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
sensor:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
secondary_info: last-changed
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: more-info
haptic: success
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
Thank you for your help!
HI,
for my button picture templates, I apparently need to first test the existence of an attribute country code (it isn’t always available as its only created on state changes), and if it exists, test for its value. I can’t get it to work ( inspector says there is no ‘undefined’ image… created one for now, but that is a hack…)
so turn to the community, please have a look first one without extra existence test:
- type: custom:button-card
template: button_picture_family
entity: device_tracker.life360_name
entity_picture: >
[[[
if (entity.attributes.country_code !== 'nl' && entity.state === 'not_home') return '/local/tiles/family/name_' + entity.attributes.country_code + '.png';
return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(/ /g, '_') + '.png';
]]]
tried to solve it with the added test:
[[[
if (entity.attributes.country_code && state === 'not_home' && entity.attributes.country_code !== 'nl') return '/local/tiles/family/name_' + entity.attributes.country_code + '.png';}
return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(/ /g, '_') + '.png';
]]]
On my Tiles setup this works as follows, but apparently the button js syntax is different, I’ve copied this to the button setup but it errors out?
if (attributes.country_code) {if (state === 'not_home' && attributes.country_code !== 'nl') return 'url(\"/local/tiles/family/name_' + attributes.country_code + '.png\")';}
return 'url(\"/local/tiles/family/name_' + state.toLowerCase().replace(/ /g, '_') + '.png\")';
same goes for my card_template:
state:
- operator: template
value: >
[[[
return entity.state == 'home'
]]]
color: '#008000'
- operator: template
value: >
[[[
return entity.attributes.country_code != 'nl' && entity.state == 'not_home'
]]]
color: 'white'
- operator: template
value: >
[[[
return entity.state == 'not_home'
]]]
color: '#555B65'
- operator: default
color: '#643aac'
even though the country_code isnt available this passes the test, and it turns the color white. While I would have wanted it to fail the test and go on to the next .
thanks for having a look
fwiw, I havent noticed any difference using the 2 or 3 position operators. custom-ui and Tiles setup always used 3.
Thanks @RomRider
If I want to use also what I already have in the custom_fields, how should I compose?
source: >
[[[
return `<ha-icon
icon="mdi:source-branch"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Source: <span style="color: var(--text-color-sensor);">${states['device_tracker.xxxx'].attributes.source_type}</span></span>`
]]]
without repeating for any return all the icon, style etc definitions?
Thank you, @RomRider! Adding the version 2.0.3 to resources did the trick. Works on Chrome and Android perfectly!!
you mean like this?:
I use this for the button:
- type: custom:button-card
template: button_motion
name: Control room
entity: binary_sensor.control_room_motion_sensor
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.control_room_motion_sensor_switch
and template:
button_motion:
template: button_body
show_last_changed: true
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
styles:
card:
- color: red
name:
- color: black
icon:
- color: red
- operator: template
value: >
[[[
return entity.attributes.on === true
]]]
styles:
card:
- color: '#555B65'
icon:
- color: 'green'
state:
- color: 'green'
id: off-icon
- operator: default
styles:
card:
- color: '#555B65'
- opacity: 0.8
icon:
- color: '#555B65'
id: off-icon
using template:
button_body:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
# tap_action:
# action: more-info
# haptic: light
# hold_action:
# action: more-info
# haptic: success
styles:
icon:
- color: var(--local-color)
lock:
- color: red
card:
- color: var(--local-color)
- border-radius: 6px
- background-color: ivory
- padding-left: 5px
- box-shadow: 0px 0px 2px 1px
name:
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- text-align: start
- font-size: 11px
- font-family: Helvetica
- justify-self: start
state:
- text-align: start
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
i added the “show_last_changed: true” to my template below:
sensor:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: more-info
haptic: success
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
and its working great beside one thing, you can see that it’s display last trigged, but when the state is changed to clear, it stopped showing the last motion time.
after state back to clear:
Any idea?
not yet… thinking of your sensors though, are they showing the last_changed in dev-state/template? if the last_changed isn’t available it won’t be shown on the button.
and if you make a quick, unformatted button, with only icon, name, state and show: last_changed? Just to see if it gets through?
i managed to solve everything, the issue was that the text was transparent.
i also changed a lot of the stuff. Thank you!
please look below.
i’m just wondering how can i change the temperatures @ AC entities to match the background of the other entities?
AC Code:
- type: custom:card-modder
style:
border-radius: 15px
card:
type: horizontal-stack
cards:
- type: custom:simple-thermostat
entity: climate.mzgn_khdr_shynh
name: AC Bedroom
step_size: 1
temps code:
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
border-radius: 15px
card:
type: custom:mini-graph-card
entities:
- sensor.mi_t_4c65a8d1ee4b
name: Temperature
line_color: var(--accent-color)
line_width: 8
font_size: 75
- type: custom:card-modder
style:
border-radius: 15px
card:
type: custom:mini-graph-card
entities:
- sensor.mi_h_4c65a8d1ee4b
name: Humidity
line_color: blue
line_width: 8
font_size: 75
- type: custom:card-modder
style:
border-radius: 15px
card:
type: custom:mini-graph-card
entities:
- sensor.illumination_158d0001e50fc6
name: Illumination
line_color: '#e74c3c'
line_width: 8
font_size: 75
cool.
as of today, all my icons have changed to the default icons, instead of my backend customized icons… in fact, many of my customizations are gone, had no code change at all, so I am really dumbstruck with this:
Ive only shared the code with you 
Hope there has been no backend change in supervisor…
update
found it: I had commented out the javascript_version: auto in my frontend.yaml since that is marked as deprecated. restored it and my icons are back!
so weird, did you check the logs? maybe create a new template?
Before i go in the same hassle as you, can you share the code of the transparent text change?. Facing the same as well. Save me time if you got the code ready 
About your entity’s of the AC color. I don’t know how to change this in the card (maybe card modder). I got it however arranged in my theme
paper-card-background-color: "rgba(255,255,255,0.15)"