Lovelace: Button card


Ofcourse, here you go, I have made some changes though, will try to push them tomorrow.


I’m fairly new, I want to install this in my HA but I don’t have a ui-lovelace.yaml file. the lovelace config file is in the hidden folder and has different structure like below. What is the syntax for adding

  - url: /local/button-card.js
    type: module

it to this config file

"data": {
    "config": {
        "title": "Home",
        "views": [
                "badges": [
                "cards": [
                        "entities": [


You need to edit through the GUI and then select raw editor… then it shows YAML.

Top right 3 dots configureUI
Top right 3 dots raw editor

You also need to take control to do this.

Don’t screw with the hidden json files in an editor.


Didn’t find it in the docs. Is it possible to use templates for coloring?
For example color green the button if humidity is within 40-60%?
And yellow red if below that value?


This works for me:

              type: custom:button-card
              color_type: card
              action: service
                domain: remote
                action: send_command
                  entity_id: remote.harmony
                  device: 55198007
                  command: 'FastForward'
              icon: mdi:fast-forward
              color: rgb(75, 75, 77)


Interesting… looking at the difference with what I tried, I’ll give it a try this way…
What I tried:

  - type: "custom:button-card"
    entity: remote.harmony_salon
    icon: mdi:volume-plus
      domain: remote
      action: send_command
        entity_id: remote.harmony_salon                 
        device: "60012590"
        command: "VolumeUp"

Based on yours, mine that doesn’t work has the extra line:

entity: remote.harmony_salon


Well, I have to thank you for this, it works perfectly :slight_smile:
Not sure if it’s the entity line I should not put in or the single quotes vs the double quotes but following your example works perfectly with my Harmony commands… Finally!

Thanks again!


you have a git for this this? Specifically looking to see how you made it left justified. using

                  - font-size: 26px
                  - text-transform: none
                  - text-align: left

doesn’t appear to align the text on the left.

EDIT: Found your git. You aren’t using the button so forget this question.


Hihi, no problem. But if you are talking about the Button Card, I do use it :stuck_out_tongue:


Yeah, but you are using the markdown card for your labels. I was using the button card as the label row and attempting to get the text to align left, and the CSS wasn’t working. I’m guessing label control is always centered on these buttons, but the markdown card is left justified.


Ah, I understand :stuck_out_tongue: I use the markdown card indeed. I just started Home Assistant in august and lovelace since January (currently creating an interface for my old ipads with Tileboard). So forgive me if some choices will look weird. But if you haven’t got much knowledge about coding you’ll have to come up with other solutions :blush:


I was just perplexed as to why text-align was working for you and not me! Then I found your git and it all made sense. Thanks. I like the look of your button pages. Currently writing a script to make it for me so I don’t have to copy/paste every style change for the cardmodder.


Any chance of getting this? Between this and merging the long press action into the master, this tool would do pretty much everything I’ve ever wanted with HA.


I might have missed this in the comments.

Are you saying there is a long press option coming? I’d be happy with just more info, but I did not realize that worked, since I did not see the option in the documentation.

Also, I have a quick question about icon colors. For the normal button card, my lights are blue when off, and yellow (or whatever color) when on. Additionally the color of yellow (or whatever color), changes based on dimmer level. But with this card I get grey and black. I’ve set color: auto, I’d love these buttons to have an option to mimic the color setup of the default button card too. Or am I doing something wrong.

Also, is there a way to set a default size of the button itself. Right now, I have changed the names of many of my entities to make them have the same size button on iOS, but on my computer, the buttons size differently. I get it and understand why, but If there was a way to size the buttons a specific size that would work well.


I have a conditional card setup for my smart lock. Once I add any ‘show_state’ or ‘state’ info, the card disappears from the front end. Without it being conditional, I can have it show the lock as “unlocked” or “locked” state text. However, it’s not a toggle - need it to be a service. So I set it up as conditional. The actual button and service works fine. But i want it to show the state, and edit the state color depending on state - once I add those, the icon just disappears.

          - cards:
          - color: 'rgb(107, 181, 255)'
            entity: binary_sensor.motion_sensor_158d00026e0bf6
            icon: 'mdi:access-point'
            name: Kitchen Motion
            type: 'custom:button-card'
          - color: 'rgb(107, 181, 255)'
            entity: cover.garage_door_opener
            icon: 'mdi:garage'
            name: Garage
            type: 'custom:button-card'
            show_state: true
              - value: open
                color: 'rgb(255, 21, 0)'
          - type: conditional
              -  entity: lock.kwikset_touchpad_electronic_deadbolt_locked_6
                 state: locked
              type: 'custom:button-card'
              action: service
                domain: lock
                action: unlock
                  entity_id: lock.kwikset_touchpad_electronic_deadbolt_locked_6
              card_style: ''
              color_type: icon
              default_color: 'rgb(107, 181, 255)'
              icon: 'mdi:lock-smart'
              name: Front Door
          - type: conditional
              -  entity: lock.kwikset_touchpad_electronic_deadbolt_locked_6
                 state: 'unlocked'
              type: 'custom:button-card'
              action: service
                domain: lock
                action: lock
                  entity_id: lock.kwikset_touchpad_electronic_deadbolt_locked_6
              icon: 'mdi:lock-smart'
              name: Front Door
        type: horizontal-stack


Lopton came up with a decent solution, but it still needs some work. When kuuji initially made this, lovelace didn’t support long press functionality but has since implemented it in the core.

As to the color question: you’re not doing anything wrong. It doesn’t support or mimic the standard card button by dimming the icon based on the level of the light entity. Per the docs, “color: auto” just sets the color of the button based on the actual color of the light (so, for RGB lights, if your light is set to the color red, the button would be red).

To your last question, you can add CSS to each button, so have you tried just defining a static height for the button? That’s how I implement and it works pretty well cross-browser.


Thanks, this is all great info. I’ll check out the long press code. As far as color goes, thanks for the info. That would be a nice option for future, maybe its a lot of work though, so no worries if not.

I’m not smart on css yet., but looks like I’ll have to figure it out. Would you be willing to post a quick example of the css I’d need to add for a button height/width, and if you’re feeling really generous, and example of the button card with the code included?? :slight_smile:
Thanks again!


Sure. Here’s a sample from my config with some CSS settings I have:

      - entity: light.living_room
        type: "custom:button-card"
        icon: mdi:lamp
        name: Living Room
        color: rgb(3, 169, 244)
        color_off: rgb(0, 0, 0)
        color_type: card
        size: 80%
        show_state: false
          - line-height: 20pt
          - font-size: 10pt
          - font-family: -apple-system, Roboto Sans
          - font-weight: bold
          - margin-bottom: 0px
          - text-transform: none
          - padding-bottom: 5px
          - padding-top: 5px
          - border: 1px solid rgb(100, 100, 100)
          - color: white
          - height: 50px

Basically, you set the height of the box itself to be a static height across entities in the row (and thus not dependent and fluid on the size of the icon/state/etc. in the button) and use padding to center the content inside the box.


Why is your “color:” option wrapped in single quotes? Also, what’s the “default_color;” option?


quotes don’t matter in that context. He probably does it out of habit. The only reason quotes may be need in yaml is if you want the parser to treat the field as a string. Sometimes this is needed especially if the field starts with a special character like [ or { because the parser will think it’s more yaml instead of text.

as for default color, it isn’t in the docs but the 4th example show’s it’s use: