Thanks, this one looks to work only with the actual cards itself, but not inside of a card. I am looking to create below example, but then in 1 or multiple vertical stacked cards. This way I can optimize the screen on phones etc. where I wouldn’t be able to fit for example “Creative Room” and “Bedroom” next to each other when using the automatic setup. I can get the 5 buttons next to each other, but then the headers are not aligned with the buttons.
To make it really agnostic, I’d add an arbitrary attribute to the entity and use the attribute value in the template:
homeassistant:
customize:
light.xxxx:
name_it_like_you_want: sensor.xxxx`
And then your entity light.xxxx will have an attribute name_it_like_you_want with the value 
I’m using quite this trick quite often.
Each room should be:
I must be missing something really obvious here, but in the docs its says to put your templetes “In ui-lovelace.yaml (or in another file using !import )”
What is and how do you use !import?
I have my lovelace config split and use !include for each view and also for my compact custom header config.
I’d like to put all my button templates in a separate file too. What obvious thing have I missed/do I not know about?
Is the below screenshot the expected outcome of the following card config? The card is significantly taller than 2px.
button_card_templates:
horizontal-blank-gap:
styles:
card:
- height: 2px
- type: custom:button-card
template: horizontal-blank-gap
Thanks for this card, great functionality and versatility. Many of us are making remotes so here is one someone can use as a starting point. This one is for Kodi and uses all native methods, so no scripts/automations needed.
Image example:
Template:
button_card_templates:
remote_button_normal:
styles:
icon:
- color: var(--primary-color)
card:
- border-radius: 0px
- opacity: 0.5
remote_button_round:
template: remote_button_normal
styles:
card:
- border-radius: 15px
Remote stack:
cards:
- cards:
- type: 'custom:button-card'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ContextMenu
entity_id: media_player.theater
template: remote_button_round
icon: 'mdi:menu-open'
- type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Up
entity_id: media_player.theater
repeat: 100
icon: 'mdi:menu-up-outline'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Up
entity_id: media_player.theater
- icon: 'mdi:chevron-double-up'
type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pageup
repeat: 100
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pageup
type: horizontal-stack
- cards:
- icon: 'mdi:menu-left-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Left
entity_id: media_player.theater
- icon: 'mdi:alpha-s-circle-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Select
entity_id: media_player.theater
- icon: 'mdi:menu-right-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Right
entity_id: media_player.theater
type: horizontal-stack
- cards:
- icon: 'mdi:backburger'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Back
entity_id: media_player.theater
- icon: 'mdi:menu-down-outline'
type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Down
entity_id: media_player.theater
repeat: 100
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Down
entity_id: media_player.theater
- icon: 'mdi:chevron-double-down'
type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pagedown
repeat: 100
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pagedown
type: horizontal-stack
- cards:
- icon: 'mdi:chevron-double-left'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: stepback
- icon: 'mdi:pause'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
action: playpause
entity_id: media_player.theater
- icon: 'mdi:chevron-double-right'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
action: stepforward
entity_id: media_player.theater
type: horizontal-stack
- cards:
- icon: 'mdi:layers-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: fullscreen
- icon: 'mdi:cctv'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ShowPlayerProcessInfo
entity_id: media_player.theater
- icon: 'mdi:information-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ShowOSD
entity_id: media_player.theater
type: horizontal-stack
type: vertical-stackYou’re right, it’s a documentation error, it’s !include.
Add: color_type: blank-card
Ok, I’m definitely missing something. I cannot find a way to have the button card templates in a separate file.
However I do the spacing it either ignores the template or fails entirely and gives the big red box.
I’d like to have all my button templates in one file and then !include it in ui-lovelace.yaml so that it is available for every view which is itself a separate file with an !include.
(I have a feeling this might be something that @Mariusthvdb has done? Or @petro if he is not sticking with his anchors?)
I did that and it works:
button_card_templates:
!include file.yaml
And then in file.yaml:
template1:
[stuff]
template2:
[stuff]
And I also have separate files for each view.
Ah!! thanks!
For some inexplicable reason I had the button_card_templates: in the separate file!!
Doh!
Thank you, sir! Interesting how I was able to create a vertical “gap card” without needing to declare the color type. Regardless, now I can add spacing in a vertical-stack-in-card! 
Except that (and I’m really sorry about this) why does this work in my ui.lovelace.yaml
button_card_templates:
haveibeenpwned:
show_state: true
show_icon: false
color: 'var(--paper-card-background-color)'
size: 70%
styles:
name:
- font-size: 14px
state:
- font-size: 14px
but this doesn’t
button_card_templates:
!include button_card_templates.yaml
Given that my buton-card-templates.yaml file is this
haveibeenpwned:
show_state: true
show_icon: false
color: 'var(--paper-card-background-color)'
size: 70%
styles:
name:
- font-size: 14px
state:
- font-size: 14px
For completeness my button is defined like this
- type: custom:button-card
entity: sensor.breaches_myemail_com
name: [email protected]
template: haveibeenpwned
state:
- value: 0
operator: '>'
styles:
card:
- box-shadow: 0px 0px 8px 2px var(--primary-text-color)
- color: red
If what you’ve written is what you have, then your include has underscores and your file has hypens and is missing one t. Appart from that your config looks fine.
What an idiot!
You could have been so much crueller. I deserved it.
My only excuse is I started this late last night and continued this morning.
No, not an excuse at all.
Sorry for wasting your time.
PS the missing t was typo in this post only
ah thanks, missed that.
didn’t solve the issue though, it seems to completely ignore the styles bit:
mixed test setup, only difference between the buttons is this:
type: horizontal-stack
cards:
- <<: *custom_button_switch
entity: switch.sw_multi_purpose_template
name: Multi purpose
and
- type: custom:button-card
template: switch
entity: switch.sw_audio_auditorium_template
name: Aud. Audio
lock: true
state:
To make it really agnostic, I’d add an arbitrary attribute to the entity and use the attribute value in the template:
that is a nice trick indeed! will note that for sure. And somehow I can’t see how to make the templated translation though, so I can use that in the button_card_templates?
I still would need to truncate the switch.sw bit at the beginning and _template at the and, to arrive at sensor.xxx_actueel to go from switch.sw_xxx_template to sensor.xxx_actueel
doing that now with
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
maybe you see another way?
yes i have this too, and the include is found alright, but the templates seem not to work (at all).
button_card_templates:
!include /config/lovelace/includes/button_card_templates.yaml
type: horizontal-stack
cards:
- type: custom:button-card
template: switch
entity: switch.sw_multi_purpose_template
name: Multi purpose
etc
etc
Ive copied my anchor into a template, (see post above) but this doesn’t configure the button like it should…
You have both style and styles defined at the same time, style is deprecated you shouldn’t use it anymore.
The path shouldn’t start with /config, as home-assistant’s root is already /config when it looks for files. I think it should be (no / at the beginning either): lovelace/includes/button_card_templates.yaml
really sorry to disagree here, but my experience teaches me differently. Paths should always start with the /, even when referencing a simple image template.
Most of the time these paths start with /local/ when these files reside in the /www folder.
since Ive filed all Lovelace files in /config/lovelace and sub folders there , /includes for includes, /tiles for tiles, /buttons for buttons ;-), this is the correct path for this includes file.
I’ve tried it without the root /config, but this won’t work. I get a popup asking me to take control or let Lovelace be configured automatically… which is a silly way for saying Ive made an error in the path … (filed an issue for that some time ago, don’t knoww if that’s picked up at all)