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
1 Like
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
1 Like
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)
1 Like
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
1 Like
Please post in English. See #0 in the link below
1 Like
hey @slimmypizza can you share your snippet code with the rest?
I’m sure I’m going to feel stupid when I see the solution, but I’m trying to get “SOLAR” closer to the icon. BTW, I also notice the icon is not centered vertically with “SOLAR”.
type: custom:button-card
name: SOLAR
icon: mdi:solar-power-variant-outline
show_name: true
show_icon: true
layout: icon_name
styles:
card:
- background-color: black
- border-color: black
- color: white
- font-weight: bold
- font-size: 45px
- text-shadow: 3px 5px 6px black, 0 0 2em yellow, 0 0 0.2em yellow
- padding: 0%
icon:
- color: yellow
- height: 35px
Instead of “layout: icon_name” I also tried under styles:
grid:
- grid-template-areas: '"i n n"'
- grid-template-rows: min-content 1fr min-content min-content
- grid-template-columns: 1fr
Trying to figure out how to fix the mini-graphcard at the bottom.
any sugestion?
Br
# Inside
- type: custom:button-card
aspect_ratio: 10/3.2
custom_fields:
value:
card:
type: custom:button-card
entity: sensor.indoor_temperature
show_icon: false
show_state: true
show_name: true
name: "Indoor Temperature :"
styles:
name:
- padding-left: 70px
- justify-self: start
- font-size: 0.9em
- font-weight: bold
state:
- padding-left: 100px
- justify-self: start
- font-size: 0.7em
card:
- background: >-
linear-gradient(90deg, rgba(28,28,28,1.0) 0%, rgba(28,28,28,0.0)
100%)
- width: 500px
- border-radius: 0%
- z-index: 1
tap_action:
action: none
hold_action:
action: none
graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.indoor_temperature
color_thresholds:
- value: -20
color: "#0000FF" # Deep blue (very cold)
- value: -10
color: "#00BFFF" # Ice blue
- value: 0
color: "#ADD8E6" # Light blue
- value: 10
color: "#00FF00" # Green (normal)
- value: 20
color: "#80FF00" # Yellow-green (getting warm)
- value: 25
color: "#FF8000" # Orange (hot)
- value: 30
color: "#FF0000" # Red (very hot)
hours_to_show: 24
hour24: true
points_per_hour: 2
animate: true
update_interval: 30
aggregate_func: avg
line_width: 2
bar_spacing: 5
height: 100
group: true
card_mod:
style: |
ha-card {border: none;
background-color: transparent;
}
show:
labels: false
fill: fade
state: false
name: false
icon: false
icon:
card:
type: custom:button-card
size: 100%
icon: mdi:thermometer
show_name: false
styles:
icon:
card:
- background-color: transparent
- border: none
- border-radius: 50%
- width: 48px
- height: 48px
- z-index: 1
tap_action:
action: none
hold_action:
action: none
styles:
card:
- background-color: var(--button-card-background-color)
custom_fields:
graph:
- position: absolute
- background-color: transparent
- bottom: "0px" # Anchor to the bottom
- left: "0px"
- width: 100% # Span the full width
- height: 70% # Adjust height as needed
- padding-bottom: 0
icon:
- position: absolute
- left: 3%
- top: 18%
value:
- position: absolute
- left: 0%
- top: 0%
tap_action:
action: none
hold_action:
action: none
bottom: -10%