Hi,
Below code for a button card has two issues. First the card is way too big as is the icon. How do I shrink it down? Also, when I click the button as opposed to the light turning off or on it brings up an attribute window where I can then turn it off/on. Help appreciated
type: custom:button-card
entity: light.living_room_lights
icon: mdi:sofa
icon_height: 10px
color: auto
tap_action:
action: more-info
name: Home
styles:
card:
- font-size: 8px
To tun the light on and off tap_action needs to be toggle.
You can make the button smaller by putting it in a horizontal stack or a grid card - the more columns in the stack/grid, the smaller it will be. The other columns can be left empty, or padded with blank buttons.
One advantage of using a grid card is that you have the “render cards as squares” option, which gives you some control over height as well.
This is a vertical stack, each row containing an 11-column grid card.
Thanks. The first issue setting to toggle off\on resolved fairly easy enough. I was also able to fix my entities card to include the icons I wanted to use. I don’t think they were available until I got button-card.
What dimension are you looking to change? You can control the icon size and height of the card with size:
type: custom:button-card
entity: light.living_room_lights
icon: mdi:sofa
size: 3em
color: auto
tap_action:
action: more-info
name: Home
styles:
card:
- font-size: 8px
thanks. this size works for the icon, but the card itself too big on dashboard.
You are going to have to provide more information. You can make the Button Card just about any size you need it to be. I started with size: because with the information you provided, I’m guessing.
One of my dashboards is built entirely with button cards, even the SideBar
May have missed one of my above posts I decided to use the additional icons with the entities card so I am all set.
