Custom: button-card

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

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!

image

And the Garage Door - OPEN state:
image

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

Please post in English. See #0 in the link below

1 Like