What are your concerns? I have been using Button Cards for years with no issues.
If no one is maintaining it, a change in Home Assistant, for example due to a new release, could potentially break it. I can imagine a lot of cases that can cause issues. You never know.
Thatās why I prefer to use solutions which are maintained.
I guess Iāll continue to live on the edge, but really itās a Lovelace card. If it eventually breaks, you can just simply change the card type.
Not as easy as you thinkā¦ thereās no other card that will accept this kind of coding without massive re-writing at the moment. I fear same as guys above. This card did die once already - about a year agoā¦ and it caused havoc in my HA, since 50-70% of my cards are made with this button card. Luckily at that time there was a kind guy who made it work again.
Itās justā¦ so universal, thereās really not many things you CANāT do with itā¦ So, having no maintainer is really frustrating.
I simply donāt know what iād use instead of this cardā¦ and i also wonder why itās not implemented in HAās button card yet? Since current built-in button card is really pretty much useless.
But, i guess this is bad side of all custom cardās: you never know how long it will workā¦
What exactly is the point here? Spending energy on a hypothetical may not be worth it.
Itās not broken and itās for all intents and purposes feature complete.
Sure, it could break, but itās such a massively popular card that I would be surprised if nobody took it over.
In the end, we all know the risks of using a custom card. Always be prepared to migrate off, if needed.
I donāt know what more could be said.
3 Likes
I love the builtin tile card, but itās customization for some of my entities. Does anyone have a custom:button-card config that looks exactly the same as the builtin tile-card ?
Which Tile Card entity format? The contents, features and interactions for the Tile Card are dependent on the device type.
What customizations are making you lean towards a VERY altered Button Card?
Check this out as an alternative solution
Thx for your reply. Already using service-call-tile feature.
Iād like to add some badges to the icon.
Share your card code and Iāll assist. Adding badges shouldnāt be an issue.
Iām considering testing the Button card but it feels like a pretty steep learning curve. What I want to do is to convert the below (the big white blob) to a button card. Has anyone done something similar? Would be awesome to have something similar to start working with (especially the grid setup)?
I quickly prepared a template for a button with temperature and humidity info, just replace the sensors you need and name as for area
temp_humid:
aspect_ratio: 1/1
show_name: true
show_icon: true
show_state: true
variables:
temp_sensor: ''
humid_sensor: ''
state_display: >
[[[
let tempState = states[variables.temp_sensor].state;
let humidState = states[variables.humid_sensor].state;
return `${tempState}Ā° ā¢ ${humidState}%`;
]]]
styles:
grid:
- grid-template-areas: |
"i"
"n"
"s"
- grid-template-rows: 1fr min-content auto
- grid-template-columns: 1fr
- grid-gap: 8px
card:
- background-color: transparent
- border: none
- box-shadow: none
- justify-items: center
- align-items: center
- text-transform: uppercase
state:
- font-size: 1.5rem
grid
- type: grid
title: Climate & Comfort
square: false
columns: 3
cards:
- &button
type: custom:button-card
name: Living Room
icon: mdi:sofa
template:
- temp_humid
variables:
temp_sensor: 'sensor.outside_temperature'
humid_sensor: 'sensor.outside_humidity'
- *button
- *button
- *button
- *button
- *button
2 Likes
You can add the tile card directly to the button card as custom field. like this?
template
- type: custom:button-card
entity: light.all_lights
template:
- tile_badge
tile_badge:
show_name: false
show_icon: false
show_state: false
show_label: false
custom_fields:
tile:
card:
type: tile
entity: '[[[ return entity.entity_id ]]]'
features_position: bottom
vertical: false
notification: >
[[[ return `<ha-icon icon="mdi:bell"></ha-icon>`; ]]]
styles:
grid:
- grid-template-areas: |
"tile"
- grid-template-rows: 100%
- grid-template-columns: 1fr
- grid-gap: 0px
- margin: 0px
- padding: 0px
- position: relative
card:
- background-color: transparent
- border: none
- box-shadow: none
- justify-items: center
- align-items: center
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- right: 0%
- top: -20%
- height: 24px
- width: 24px
- z-index: 9999
split config
tile_badge_base:
show_name: false
show_icon: false
show_state: false
show_label: false
styles:
grid:
- grid-template-areas: |
"tile"
- grid-template-rows: 100%
- grid-template-columns: 1fr
- grid-gap: 0px
- margin: 0px
- padding: 0px
- position: relative
card:
- background-color: transparent
- border: none
- box-shadow: none
- justify-items: center
- align-items: center
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- right: 0%
- top: -10%
- height: 24px
- width: 24px
- z-index: 9999
tile_notification:
custom_fields:
notification: >
[[[ return `<ha-icon icon="mdi:vacuum"></ha-icon>`; ]]]
tile_vacuum:
variables:
tile_entity: ''
custom_fields:
tile:
card:
type: tile
entity: '[[[ return variables.tile_entity ]]]'
features_position: bottom
vertical: true
show_entity_picture: false
features:
- type: vacuum-commands
commands:
- start_pause
- stop
- clean_spot
- type: custom:button-card
variables:
tile_entity: vacuum.0_ground_floor
template:
- tile_badge_base
- tile_notification
- tile_vacuum
1 Like
Wow - thank you! That is very helpful. Will have a look and see if I can figure it out 
@VietNgoc Wow! That is brilliant. Iāve been able to use this trick to effectively create a fully templated Tile card. Thanks a lot!
I had to tweak the styles a bit as I found the Tileās label was not aligned correctly, and there was extra padding around the Tile card.
e.g. Hereās my templated Tile card that flips between āResumeā and āPauseā depending on the state of another entity
type: custom:button-card
entity: button.sprinklers_esp8266_pause
show_name: false
show_icon: false
show_state: false
show_label: false
custom_fields:
tile:
card:
type: tile
tap_action:
action: perform-action
perform_action: button.press
target:
entity_id: |
[[[
if (states['sensor.sprinklers_esp8266_controller_state'].state == 'Paused')
return "button.sprinklers_esp8266_resume"
else
return "button.sprinklers_esp8266_pause"
]]]
name: >
[[[ if (states['sensor.sprinklers_esp8266_controller_state'].state ==
'Paused')
return "Resume"
else
return "Pause"
]]]
entity: "[[[ return entity.entity_id ]]]"
icon: |
[[[
if (states['sensor.sprinklers_esp8266_controller_state'].state == 'Paused')
return "mdi:play"
else
return "mdi:pause"
]]]
styles:
grid:
- grid-template-areas: |
"tile"
- text-align: left
card:
- padding: 0
- border: none
grid_options:
columns: 6
The example in action. Left is Tile-card-in-button-card, right is regular Tile card.
Ultimately Iām looking forward to using the locks feature to disable the ābuttonā when itās not applicable.
anyone knows why only name showing in this button card?
button_card_templates:
hide_icon:
show_icon: false
button_menu_small:
template:
- hide_icon
styles:
card:
- background-color: rgba(150, 152, 154, 0.85)
- border-color: black
- width: 210px
- height: 75px
name:
- font-size: 30px
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 1)
- justify-self: center
- align-self: center
button_menu_medium:
template:
- hide_icon
styles:
card:
- background-color: rgba(150, 152, 154, 0.85)
- border-color: '[[[ return entity && entity.state === ''on'' ? ''white'' : ''black''; ]]]'
- box-shadow: |-
[[[ return entity && entity.state === 'on'
? '0 0 10px 3px white'
: 'none'; ]]]
- width: 210px
- height: 150px
name:
- font-size: 30px
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 1)
- justify-self: center
- align-self: end
label:
- font-size: 30px
- font-weight: 200
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 1)
- justify-self: center
- align-self: start
variable_room_office:
variables:
var_room_light: light.room_office_light_cw
var_m12_1_label_button_1_left: main
var_m12_1_name_button_1_right: LIGHT
type: custom:button-card
template:
- variable_room_office
- button_menu_medium
entity: "[[[ return variables.var_entity ]]]"
variables:
var_name: "[[[ return variables.var_m12_1_name_button_1_left ]]]"
var_label: "[[[ return variables.var_m12_1_label_button_1_left ]]]"
var_entity: "[[[ return variables.var_room_light ]]]"
name: "[[[ return variables.var_name ]]]"
show_label: true
label: "[[[ return variables.var_label ]]]"
style:
top: 150px
left: 120px
styles:
card:
- display: |
[[[ return variables.var_name === 'none' ? 'none' : 'block'; ]]]
- border-radius: 0px 0px 13px 0px
tap_action:
action: call-service
service: light.toggle
target:
entity_id: "[[[ return variables.var_entity ]]]"
button_menu_medium:
show_label: true
Thanks for replay,
Problem is not in show_label: true, but in variables naming:)
here is working card:
cn: button_2_left
style:
top: 310px
left: 120px
variables:
var_name: "[[[ return variables.var_m12_1_name_button_2_left ]]]"
var_word: "[[[ return variables.var_m12_1_label_button_2_left ]]]"
var_te: "[[[ return variables.var_room_light_spot_03 ]]]"
entity: "[[[ return variables.var_te ]]]"
type: custom:button-card
template:
- variable_room_office
- button_menu_medium
name: "[[[ return variables.var_name ]]]"
label: "[[[ return variables.var_word ]]]"
styles:
card:
- display: |
[[[ return variables.var_name === 'none' ? 'none' : 'block'; ]]]
- border-radius: 0px 0px 13px 0px
tap_action:
action: call-service
service: light.toggle
target:
entity_id: "[[[ return variables.var_te ]]]"
Oh, I didnāt realize there might be a conflict in the name of the variables. May I ask why so complicated templates with so many variables, where in button you have other variables only referring to other variables? 
Because I have all settings in button_card_templates
Is there a way to get the last_reported attribute in custom:button-card?
I can get last_changed by setting:
show_last_changed: true
Iām interested in the last_reported date.
Many thanks!