Installing the Custom Button Card?

I’m feeling a little bit like a crazy person here… I see everyone doing cool things with the custom button card, but the link in the installation to button-card.js is broken, and I don’t see that file anywhere. How do I actually install it?

Manual Installation

  1. Download the button-card
    Note that this is a direct link to the .js file. Most browsers won’t load this if you just click on it. You need to right-click and do a “save as”. Then follow the rest of these directions.
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace-card.yaml

title: Home resources: - url: /local/button-card.js type: module

  1. Write configuration for the card in your ui-lovelace.yaml

Installation and tracking with hacs

  1. Make sure the HACS component is installed and working.
  2. Search for button-card and add it through HACS
  3. Add the configuration to your ui-lovelace.yaml

resources: - url: /hacsfiles/button-card/button-card.js type: module

  1. Refresh home-assistant.

I used the HACS method to install.

I already linked directly to what you’ve just copied and pasted here… this doesn’t address my question.

The correct link is

https://github.com/custom-cards/button-card/releases/download/v3.4.2/button-card.js

When you said the link was “broken”, I assumed you meant that the link went nowhere or to someplace it shouldn’t. (That’s the textbook definition of a broken link.)
I checked the link and it downloaded a .js file that is in fact identical to the .js file in your corrected link.
I thought possibly that you had the same result I did when I simply clicked on the link. (It was blocked by my anti-virus.) So I added the explanation of doing a save-as to bypass that apparently-does-nothing result.
At this point, I’m not at all sure why you had a problem with the original link.
However, you did exactly what folks should do, if they link in a github readme doesn’t appear to work: Go looking through the github for the latest release and download that. I should have included that in my earlier response. I’m glad that worked for you.

I cant see to get the button-card.js working. Any thoughts?
I have
-added the button-card.js to my www folder and added it to resources:
-tried to install the HACS button-card but it just spins (never installs)
-rebooted several times…

Here is my dashboard

title: Tablet
# Include external resources
resources:
  - url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
    type: module
  - url: /local/button-card.js
    type: module
  - url: /community/button-card/button-card.js 
    type: module    
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
excluded_entities:
  - weblink.router



views:


        
- icon: mdi:home-assistant
  cards: 
  
    - type: vertical-stack
      cards:

        - type: 'custom:button-card'
          entity: light.living_room_lamp
          icon: mdi:light-bulb
          color: rgb(28, 128, 199)
          state:
            - value: 'off'
              color: rgb(255, 0, 0)

My lovelace view says “Custom element doesn’t exist:button-card”

Use one entry:

/local/community/button-card.js

P.S. Or - if the .js file is in a additional folder:


/local/community/button-card/button-card.js

That did not work… It still says “Custom element doesn’t exist: cutton-card”
There are files in “\www\community\button-card” button-card.js & button-card.js.gz

You only need the .js file. The second one is the zipped version.

Which yaml mode is this in your code above?

From a seperate dashboard…

  dashboards:
    lovelace-generated: # Needs to contain a hyphen (-)
      mode: yaml
      filename: ui-office_tablet.yaml
      title: Office Tablet
      icon: mdi:tablet-dashboard
      show_in_sidebar: true
      require_admin: false

Ok. So when you use yaml mode then you should put the ressources in the config file:

https://www.home-assistant.io/lovelace/dashboards/#adding-more-dashboards-with-yaml

and I did have it there just in case here is the entire lovelace part…

lovelace:
  mode: yaml  
  resources:
    - url: /local/my-custom-card.js
      type: js
    - url: /local/my-webfont.css
      type: css
    - url: /local/vertical-stack-in-card.js
      type: js 
    - url: /local/Home-Assistant-Mail-And-Packages-Custom-Card-master/mail-and-packages-card.js
      type: js
    - url: /local/grid-layout.js
      type: js
    - url: /local/layout-card.js
      type: js
    - url: /local/button-card.js
      type: module
    - url: /local/community/button-card/button-card.js 
      type: js
#https://github.com/mattieha/slider-button-card
    - url: /local/slider-button-card.js 
      type: js
    
#  - url: /local/custom_ui/weather-card.js
#    type: 
  dashboards:
    lovelace-generated: # Needs to contain a hyphen (-)
      mode: yaml
      filename: ui-office_tablet.yaml
      title: Office Tablet
      icon: mdi:tablet-dashboard
      show_in_sidebar: true
      require_admin: false

So why do you repeat them in your dashboard? Sure, that this is correct?

Ok, after a whole bunch of cleanup it would not work, but found a page that shows to clear cache (ctrl+R) and that worked.

Thanks for your help!!!

Obviously the HACS install method is still broken as there is no way i can install via HACS.

I edited the Dashboard as below but still gives an error … i wonder if url is ok

title: Home
resources:

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

However looking into configuration → resources its listed as HACS Resource

/hacsfiles/button-card/button-card.js?hacstag=xyz

You don’t need those resources statements in the dashboard file at all.
The only place you need them is in configuration.yaml as follows:

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/button-card/button-card.js
      type: module
1 Like

Thank you sir.
This was what I needed to do to get it to work.

Seems like the installation-guide should be updated to include information that it´s required to have a specific ui-lovelace.yalm, so newbies (like me) dont spend hours and days struggling and searching for information to get it up and running, with a default installation, managing dashboards from HA Gui … just the fact that the “small” installation info is “somewhere” between configuration and and guides is a bit weird, should be at the top page … as i used HACS to install, i had the feeling, that it was installed correct, as i can see it in “Recources” … but nothing works … as many other have experienced

buonasera bohème61, ti scrivo in italiano perche forse è piu facile la traduzione per te…
sono un neofita e vorrei installare button-card per comandare il mio telecomando, almeno per cominciare, potresti aiutarmi nell’installazione, ti avverto e da meno di due settimane che opero su homeassistant, ho capito che dovrei scaricare il file da github perche su hacs non la vedo.
te ne sarei grato se mi volessi aiutare. GRAZIE

Hej Snawork , det ville være lættere for mig at oversætte fra engelsk, Dansk eller Svensk … :grin:

Here is the “manual installation guide”

Manual Installation

  1. Download the button-card
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace-card.yaml
# title: Home
# resources:
#   - url: /local/button-card.js
#     type: module
  1. Write configuration for the card in your ui-lovelace.yaml

But as you see in the overall guide, there is a lot configuration effort, and i cant help you there, as im also quite new to HA since November ( but i found it in HACS, as i recall :laughing: ) but maybe it was in a custom-repository, not in default HACS-repository , so if you are new(2 weeks experience in HA) i suggest you wait with trying to configure your remote-control

Here is the repository on Github

If you decide to download it from Github, you follow above procedure, and restart HA, then you have to create a “custom” Lovelace.Yaml file ( as well as adding url: to this in your /config/configuration.yaml ) , as you should not edit your default Lovelace (frontpage) or other you might have created via “Manage Dashboard”

I have so far only created 4 UI Controlled Dashboards, no “dashboard.yaml” ui-lovelace.yaml , and when it comes to “Button-design” are my needs so far limited style/size etc, a lot of this can you accomplice by “merging” cards … actually i just got my Android TCL-TV remote into AQARA-Hub-M2( IR- Controller ), 2 days ago, but it doesnt show up in HA, “Homekit”-aqara integration, all other Aqara/xaumi devices i have work perfect in HA , so far i can only use my phone-ap for this TV-remote , and/or certain functions through Google-Home/assistant … beside i have alot more important stuff
to integrate and automate, than my tv-remote.
If it’s only a “Button” you are looking for, there are other cards ( and as i said can you test which “funktions” you can merge from other cards…
example:
multi-entities-card
custom:slider-button-card
and place then in layout-cads
or grid

Wish you good luck … BR Jørgen