Custom: button-card

Configuration Frontend
1

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.

image

2

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
3

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
4

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.

5

Grid layout is part of custom:button-card.

6

I didnt realize grid was part of custom:button-card. That works very well. Thank you!

image

7

And the Garage Door - OPEN state:
image

8

Very nice!
The documentation is very large, so it can happen quickly to overlook something.

9

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)
10

How did you get the second line added to the card?