Lovelace: Button card


:tada: 0.0.6 released with fixes for 0.88 :tada:


Does not look like it was before. Text size is now to big and bold.


yeah, we know, we’re just trying to get people out of an error state. feel free to play around with style and report back if you have a good fix. I don’t plan on looking at it more tonight


Everything did look correct on the previous fix from ammmze/button-card.The latest have correct text size only more bold than before :slight_smile:
Trying to find the version I added yesterday when I linked to the fix :stuck_out_tongue:


Looks really good to me now…

Any idea what CSS I can use to change the bottom of the button on the right to align with the bottom of the other 2? (the ones on the left are the core buttons, the one on the right this custom-button)


Very happy that it’s been fixed. I actually have a working UI again, yay!

There’s a few minor issues that I noticed, here is an annotated pic of them , plus one of how it looked before:

  • color_type: card and color_type: icon have different heights, if you put them side by side in a horizontal stack you’ll see they won’t line up properly.
  • kinda similar issue if you put an entity-button and custom-button in a horizontal stack together. they used to line up and now the custom button has a different height.
  • Label card (color_type: label-card) seems taller than it’s supposed to be?
  • The minimum height for buttons with no text or icon (color only) is a lot smaller - pic - new one on top and old way on bottom. To be honest I’m kinda torn on this, the new way could open more possibilities but the old way was more mobile friendly.

So pretty much every issue I’ve encountered was height-related. Perhaps it’s the larger/bolder text that is causing these issues or something? I can deal with these minor issues for now, super excited to have it working again :smiley:


So identical to my post just above yours… I am thinking there should be a CSS fix for it but I can’t find it yet.

Using font-weight: 400 fixes the holding…


Is it possible to password protect a button. For instance have the user enter a pin before the button gets enabled?


I love this card and thanks for the great work :slight_smile: There are two feature I would find very helpful:

  • Extend with custom more-info dialog, like in . That way a “Living Room” button could for instance show a list of entities in said room when pressed (so that not all entities would have to be displayed in the view). Saves a lot of space.
  • Support different tap and hold actions. Again, the example above. Clicking “Living room” could turn on/off all lights whilst holding it could reveal the more-info dialog with all the entities in the room.


Here’s a dumb question that is more of a software question than just this card itself. How do I know what version to put a the end

- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
  type: module

Is this the version of the button? javascript?


The version number means nothing if you’re not using custom updated. It’s just a string. Changing it, breaks the cache so that updates are loaded. That’s all.


Announcement to all:

This is now a community card. No single dev is going to be maintaining it or adding features. It will be up to the community to do these things, should they feel the desire. Kuuji, Ludeeus and myself will review changes but will likely not be doing any actual work on it going forward.


Anybody know why I can’t place one of these cards on top of another card?

Both of the “office lamp” cards are button-cards. I can add more to the same card (see the office lamp and garage light card) but I’m unable to place the card on top of any other cards, they just own the entire column.

See below, I can never have a card underneath a “button-card”.



You can:

Mine are both in Vertical-Stacks though


Sean… try this in the js file from line 40

        button-card-button div {
          padding: 2.25%;
          text-transform: none;
          font-size: 1.2rem;
          font-weight: 400;
          white-space: nowrap;

I changed the padding from 4% to 2.25%. The other stuff is as per an unmerged PR from @iantrich
This looks pretty right both on PC and mobile for me:

The 2 left buttons are the standard button card in core. The right one is this custom-button
It looks right on my iPhone, iPad and PC


The most right button is slightly lower in height (see at the bottom of the card) you might want to adjust it just a tiny bit.


slightly higher you mean?
That’s 2.6%… very slightly lower on mobile


Hm this screenshot seems right to me though :stuck_out_tongue: . In your previous screenshot the button on the right is smaller.


there’s nothing in it lol


I meant that the right button is slightly smaller in your first screenshot. But it isn’t in the second.


I drew a line, but it is barely noticeable. You should probably download or zoom in on the image to see the height difference.