Try removing the padding from the card itself.
card:
- padding: 0px 0px
Try the config on this post, if I understand correctly thatās probably what you want:
Lovelace: Button card
You might need to adjust the layout and the grid-template-areas and columns
thats getting there! thanks you very much indeed:
using icon_name as in the post:
and icon_name_state:
only thing left is the vertical positioning to the centerā¦
even after heightening the button somewhat, vertical centration wont workā¦
btw @petro, thanks for your fine counter template! was looking for that. I can confirm you dont need to hardcode the group name there either, and use:
label_template: >
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
return count.toString() + ' of ' + entities.length.toString();
this one uses layout: icon_name_state
1 Like
The way I have my system setup, I need to hard code the group because Iām using a switch for the status. I havenāt made the change in my configuration yet.
Try changing the padding of the card : padding: 0px 0px it should center itself automatically
Could you post your input_boolean: declaration as it pertains to this specific config? Iām curious to see how each input_boolean is configured.
Also, the spacing issue RomRider identified does need to be fixed. Looks like itās off by a single indentation. Itās likely your other cards have this indentation problem as well.
Absolutely! Thanks for looking at it guys!
livingroom:
name: Living
initial: on
diningroom:
name: Dining
initial: off
kitchen:
name: Kitchen
initial: offThat looks ok as well. Hmmmā¦
I encountered a similar issue when I first began creating these tabbed views. In my case, one of my automations had an improperly configured Group Entity ID which ended up causing the tabbed views not to appear. To fix this, I leveraged the Unused Entities menu from the HA UI to make sure I had the correct spelling. To my naked eye, your config looks right but FWIW, RomRider caught a spacing issue that I missed soā¦
A bit late, but I missed your comment, but no it is a per person map, I just moved it so that my current location wouldnāt be visible on the forums 
but it is a person only map. I could add more zones and stuff, but I wanted to use it only to show where a set person is.
For what itās worth, you guys could make this easier on yourself if you use switch templates and an input_select. No automations.
input_select:
room_display:
name: What room to display
options:
- living
- dining
- kitchen
initial: kitchen
Then for switches.
switch:
- platform: template
switches:
living:
value_template: "{{ is_state('input_select.room_display', 'living') }}"
turn_on:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: living
turn_off:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: living
dining:
value_template: "{{ is_state('input_select.room_display', 'dining') }}"
turn_on:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: dining
turn_off:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: dining
living:
value_template: "{{ is_state('input_select.room_display', 'kitchen') }}"
turn_on:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: kitchen
turn_off:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: kitchen
Now you have what is equivalent to 3 radio buttons. Only one of the switches will be on at a time.
2 Likes
Similar to how the padlock icon appears in the corner of the button if locking is enabled, is it possible to use the advanced grid options to have a number appear in either the top left or top right of this button, without affecting the centred position of the icon?
I noticed in the referenced style code that it seems to be listed as an overlay. Could overlay perhaps be a new option, with style letting you choose icons, colour, position, text, padding, etc?
Basically I have 10 kitchen spots that I wish to represent as 10 small buttons. It would be nice to have a number in each one as well, but tbh if this isnāt straightforward I can happily manage without.
Itās not straightforward, but I think you can achieve that by playing with CSS and moving eg the name out of the grid area. Going to test something tomorrow and let you know if I managed to do that. With CSS possibilities are virtually infinite. You can even get rid of the grid altogether and/or use fixed positioning for some elements 
1 Like
try this, you have to constrain the width of the card but it should work.
type: "custom:button-card"
layout: icon_name
color: auto
show_state: false
show_name: true
show_label: false
styles:
grid:
- grid-template-rows: 50px 0px 0px
- grid-template-columns: 50px 0px
card:
- padding: 0px
- border-radius: 15px
- height: 50px
- width: 50px
name:
- align-self: start
- padding: 10px -20px
Sorry @petro Iām not sure what youāre trying to show me? I see that your yaml example gives me an icon in the button, but Iām hoping to have a number appear in the top left or right corner of the button, a bit like the padlock icon.
Hmm, I updated to the latest version of this custom card. But now color_off doesnāt seems to work anymore. The background of the card is white while it should be some kind of grey according to my theme. It worked like it should before.
Anyone any idea?
āeditā
Even if I override the default color_off, the cardās background stays white:
- type: custom:button-card
color_type: card
entity: switch.eettafel_lamp
action: toggle
name: Eettafel
icon: mdi:ceiling-light
color: var(--primary-color)
color_off: rgb(168, 173, 175)color_off is not an option anymore it has been deprecated, please read the new documentation on github, especially:
https://github.com/custom-cards/button-card/blob/master/README.md#configuration-with-states
1 Like
Kuuji no longer maintains this card, the docs in the first post are indeed outdated, but I would always suggest getting the docs from the github repo instead of the forums.
I believe @romrider is the only dev working on this now!
1 Like
yes, thanks. that seems to work better. Though the icon and text still arenāt aligned centric, but at the top I think. Will have to find a way to centre them centricā¦
not sure if this is a feature request, but can we have icon_name_state_labelā¦
reason I ask might be edge, but still, useful for others too. Having a longer shallow button has plenty of horizontal space, and not much vertical.
as you can see the label is placed really at the bottom edge (might need some extra padding after all, but dont want to de-place the center icon_name_state anymore.
an extra option for icon_name_state_label would be perfectā¦ or icon_label_state:
maybe a bug: using icon_name_state, both name and state are colored, font_weighted and sized according to the name color and size, no matter what is set at the state config:
styles:
card:
- border-radius: 10px
- width: 330px
- height: 50px
- --paper-card-background-color: rgb(255, 251, 239)
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
name:
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- value: 'on'
styles:
name:
- color: red
state:
- color: grey
- value: 'off'
style:
- opacity: 0.4
styles:
icon:
- color: blue
name:
- color: gray
state:
- color: yellow
thanks!
I really, really, really hate this forum software. Canāt find anything. Why the F are they using this crap??
But my real question was: can I remove/adjust the padding between buttons/cards?