Is there a way to include a title above the icon when using a custom: button-card? I have only just begun to use this custom card (for my garage door) and co not see a way to include a title/label/name/some sort of text - above the icon.
Thanks.
By default the custom button card layout [1] does not provide this option.
But you may set show_icon: false
, show_label: true
and use the label to populate whatever layout and components you want., e.g.:
card:
type: custom:button-card
size: 30px
styles:
label:
- font-size: 85%
card:
- height: 70px
label: >
[[[
var label = ""
label = `my title<br><ha-icon icon=mdi:wrench"` +
`" style="width: 30px; height: 30px; padding-top: 7px;">` +
`</ha-icon><br>my footer`;
return label;
]]]
show_label: true
show_name: false
show_icon: false
:
[1] GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
Alternatively you can use button card grid-layout:
Some examples:
label on top:
styles:
grid:
- grid-template-areas: '"l" "i" "n" "s"'
- grid-template-rows: min-content 1fr min-content min-content
- grid-template-columns: 1fr
Thank you. The reason I’m using the custom:button-card is to give the ability to change the icon with the state of the garage door being open or closed. What I have works fine but I wanted to see if I could put a label on the card at the top. Not necessary, but all the other cards on my dashboard have labels. So I don’t believe the grid card will allow for the icon to change based on entity state. The solution above turning off show_icon and providing label as a var did not work for me. The only things that were visible were the “my title” and “my footer” text. I guess it’s possible to program change the label based on state in the custom:button-card but only if I get the icon within the label to show. Is ha-icon the right tag? It just doesn’t seem to pick up the icon.
Grid layout is part of custom:button-card.
I didnt realize grid was part of custom:button-card. That works very well. Thank you!
And the Garage Door - OPEN state:
Very nice!
The documentation is very large, so it can happen quickly to overlook something.
Could you share your lovelace snippet for this? I’ve been looking to replicate exactly this: a garage door button with hold functionality
EDIT: Got it working
type: horizontal-stack
cards:
- type: custom:button-card
label: Main Garage
styles:
card:
- height: 150px
grid:
- grid-template-areas: '"l" "i" "s" "n"'
- grid-template-rows: min-content 1fr min-content min-content
- grid-template-columns: 1fr
entity: cover.garage_door
tap_action:
action: none
hold_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.garage_main_door_opener_2
show_state: true
show_label: true
size: 40%
state:
- color: green
icon: mdi:garage
value: closed
state: CLOSED
name: (Hold to Open)
- color: red
icon: mdi:garage-open
value: open
name: (Hold to Close)
How did you get the second line added to the card?
Hi, I had the same need (add a title above the icon in a button card. I see you succeeded, complete!!! Can you send or show the code you used? Thanks
Please post in English. See #0 in the link below