Does anyone know how to add a label under a custom button. Is that even possible?
Which button? You’ll have to post your yaml.
I’m trying to create a custom button. I don’t have yaml file. I’m just trying to find out if it’s even possible to have a label under a custom button.
Use “button-card” from HACS (by RomRider). If you don’t have it installed, get it in HACS store. It’s most used card out there (by many people). I’m sure it allows what you want.
I have the button-card installed. That’s the one I am referring to when I say “custom button”. There isn’t a way to add a label under the button-card, unless I am missing something.
Oh, you mean under whole button card? well, there is… create a vertical stack, then top one is your card and bottom one is your label:
type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.absolutni_tlak_zunaj
show_state: true
styles:
card:
- background: green
- type: custom:button-card
name: your label
styles:
card:
- background: red
(colors are added for better explanation)
Here is my version. The label does not align with the button. Shouldn’t the label card be center aligned since I have display: flex; and justify-content: center;
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
background: transparent;
box-shadow: none;
}
card:
type: custom:button-card
icon: mdi:garage
name: null
styles:
card:
- border-radius: 50%
- height: 70px
- width: 70px
- padding: 0
- background-color: "#"
- box-shadow: none
icon:
- color: "#93c293"
- width: 28px
- height: 28px
- type: custom:button-card
name: your label
styles:
card:
- border-radius: 0px
- border: none
- height: 40px
- width: 70px
- padding: 0
- background-color: "#"
- box-shadow: none
It aligns correctly if you change second card to “mod-card”, too:
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
background: transparent;
box-shadow: none;
}
card:
type: custom:button-card
icon: mdi:garage
name: null
styles:
card:
- border-radius: 50%
- height: 70px
- width: 70px
- padding: 0
- background-color: "#"
- box-shadow: none
icon:
- color: "#93c293"
- width: 28px
- height: 28px
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
background: transparent;
box-shadow: none;
}
card:
type: custom:button-card
name: your label
styles:
card:
- border-radius: 0px
- border: none
- height: 40px
- width: 70px
- padding: 0
- background-color: "#"
- box-shadow: none
I don’t like to work with card_mod, since it’s too complicated, and different in each card - you must find correct “thing” to succesfull modification (like ha-card, host… and there are tons of them). I only use “custom:button-card”. It has tons of options, too, and quite enough for my needs.
This actually worked. Since I’ll have 4 cards across I put vertical-stack in horizontal-stack. Can we bring the label and the the button closer together?
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
background: transparent;
box-shadow: none;
}
card:
type: custom:button-card
icon: mdi:garage
name: null
styles:
card:
- border-radius: 50%
- height: 70px
- width: 70px
- padding: 0
- background-color: "#"
- box-shadow: none
icon:
- color: "#93c293"
- width: 28px
- height: 28px
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
background: transparent;
box-shadow: none;
font-family: 'Quicksand', sans-serif;
}
card:
type: custom:button-card
name: your label
styles:
card:
- border-radius: 0px
- border: none
- height: 40px
- width: 90px
- padding: 0
- background-color: "#"
- box-shadow: none'
name:
- font-size: 13px
- color: "#555"
- padding: 8px
- position: absolute
I was able to move the label up by using margin: -8px 0px !important;. Not sure if this is the best way to do this.
What I noticed is on the regular browser (Chrome Desktop) the label is center aligned with the button. However, on my iPhone app the label is left aligned. I tried adding justify-self: center; to ha-card style, but that didn’t make a difference.
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
background: transparent;
box-shadow: none;
}
card:
type: custom:button-card
icon: mdi:garage
name: null
styles:
card:
- border-radius: 50%
- height: 70px
- width: 70px
- padding: 0
- background-color: "#"
- box-shadow: none
icon:
- color: "#93c293"
- width: 28px
- height: 28px
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
background: transparent;
box-shadow: none;
font-family: 'Quicksand', sans-serif;
justify-self: center;
margin: -8px 0px !important;
}
card:
type: custom:button-card
name: your label
styles:
card:
- border-radius: 0px
- border: none
- height: 40px
- width: 90px
- padding: 0
- background-color: "#"
- box-shadow: none
name:
- font-size: 13px
- color: "#555"
- padding: 8px
- position: absolute
Found the answer myself.
- position: absolute in the name style was causing that issue.
I guess you can to a certain degree with reducing card height.
But why complicating like this? Just enable “label” in custom button card, it will popup below icon:
type: custom:button-card
icon: mdi:garage
name: null
show_label: true
label: your label
etc...
Second: why set name to “null” and then add a separate label? Just enter your text as name:
type: custom:button-card
icon: mdi:garage
name: your desired text
etc...
if you add “show_state: true” then state of selected sensor will popup, too.
type: custom:button-card
icon: mdi:garage
name: your desired text
show_state: true
etc...
Yeah, if you choose that then you must also add “left: xy%”, or right… or top… or bottom… percent.
Oh, i see…you want a circle…well…
How can I center the text if I use - position: absolute - top: 3px;
I think I found the answer
name:
- font-size: 13px
- color: "#555"
- position: absolute
- top: 3px;
- left: 50%
- transform: translate(-50%, 0%)