I’d think you’d want to talk with the dev’s of the app
hmm… but it doesn’t work even in the browser, not just Android app 
Default HA buttons do vibrate if I’m not mistaken.
I’m not sure about default buttons on Android, but this custom card (where the thread is about) does vibrate on Android when using the ‘haptic’ code. It doesn’t offer the same experience as iOS obviously (because of the haptic hardware) but it does vibrate.
Ah! Awesome, I will test… I didn’t even try it, since in the documentation only iOS is mentioned.
triggers_update field is working perfectly ! what a great addition this is, and what a calming influence in the HA instance this has brought. cant thank you enough.
can we already use
- type: custom:button-card
template: button_motion
name: Laundry
entity: binary_sensor.laundry_sensor_motion
triggers_update: switch.laundry_sensor_motion
variables:
clear_icon: mdi:washing-machine
instead of the list:
- type: custom:button-card
template: button_motion
name: Laundry
entity: binary_sensor.laundry_sensor_motion
triggers_update:
- switch.laundry_sensor_motion
variables:
clear_icon: mdi:washing-machine
As you can see, I use entities with the identical object_id, which almost begs for a templating possibility…
would hope you will consider that for the future and allow for:
- type: custom:button-card
template: button_motion
name: Laundry
entity: binary_sensor.laundry_sensor_motion
triggers_update: >
[[[ return 'switch.' + entity.object_id ]]]
variables:
clear_icon: mdi:washing-machine
thanks for considering!
Another quick question. Anyone knows if this layout is possible (height is fixed, width is auto).
Trying to get the top left button to span over 2 spaces (without setting fixed width, cause that messes up the mobile view).
I believe you’ll need the layout card for that but you’ll lose the auto sizing on the adjacent cards. Personally, I’ve gotten into a habit of always keeping the same size cards in rows. For mobile in a situation like that, i’d make a banner button and 2 rows of 3
Yes, that’s what I’ve been doing…or using blank card to fill up the space.
But I’m surprised anyone hasn’t tackled with this before
Hass running 0108.1 Operating System 3.12
Hello all, i like this panels so i copied button-card.js to \muy-hassip-\config\www
the www did not exist so this dir i have created also.
Include the card code in your ui-lovelace-card.yaml
resources:
- url: /local/button-card.js
type: module
I tried, but i gives me error
Resources should no longer be added to the Lovelace configuration but can be added in the Lovelace config panel. So i did place it in the picture below
I restared hass a few times, refreshed browser but it is not working now
They have it’s just that the code that lays everything out takes over
Yes with the latest beta you can 
That would completely kill the purpose of triggers_update. The goal is to reduce the load, so introducing template will require to run the template every time any entity is updated. I understand your point, but there is no other way. I can implement it, but you’ll again have a less responsive UI (a bit, not as bad as before though )
The resources section has moved to configuration.yaml since HA 108.x, I didn’t update the documentation.
lovelace:
resources:
- url: PATH_TO/button-card.js
type: module
1 Like
That was last part yesterday where is was lost
Now i thing i’am almost there
-Retored last backup form wednesday
Folowed this https://hacs.xyz/docs/installation/prerequisites
Get token from https://github.com/settings/tokens
My button-card.js is installed here : \My-HA-IP\config\www\community\button-card\button-card.js
( looking from my samba share into HA)
So in my /config/configuration.yaml //update today, below is for me the right path
default_config:
lovelace:
resources:
- url: /community/button-card/button-card.js
type: module
- url: /community/button-toolbar/button-toolbar.js
type: module
(and not to forget I have restarted the HA every time )
Still no luck. But I think I’m almost there
Solved it
if i use in lovelace
and paste for pe, then lovelace add sneaky 1 extra - for the type, so in the raw config - - type remove 2 idents from all entries
- type: "custom:button-card"
entity: switch.ac
icon: mdi:air-conditioner
color: rgb(28, 128, 199)
state:
- value: "off"
color: rgb(255, 0, 0)
So what is a better editor to add stuf to the lovelace yaml ?
Hello,
I’m trying to set the color of a custom_fields value like that:
I have the folowing button_card_templates
button_card_templates:
temp_and_setpoint:
icon: mdi:thermometer
aspect_ratio: 1/1
tap_action:
action: toggle
name: DefaultName
label: DefaultLabe
show_name: true
show_icon: true
show_label: false
show_last_changed: false
show_state: false
styles:
grid:
- grid-template-areas: '"n" "i" "temperature" "setpoint"'
- grid-template-rows: min-content 1fr
icon:
- size: 50%
custom_fields:
- temperature:
- font-weight: normal
- font-size: 8px
- align-self: left
- --text-color-sensor: '[[[return "red";]]]'
- setpoint:
- font-weight: normal
- font-size: 8px
- align-self: left
- --text-color-sensor: '[[[return "blue";]]]'
According to the documentation and the examples with the HASSOS cpu/ram/sd element, I’ve tried to use it like that:
- type: custom:button-card template: temp_and_setpoint name: "Cuisine" custom_fields: temperature: > [[[ return `<span>Temp: <span style="color: var(--text-color-sensor);">${states['sensor.msalon_temperature'].state}%</span></span>` ]]] setpoint: > [[[ return `<span>Cons: <span style="color: var(--text-color-sensor);">${states['sensor.test_setpoint_cuisine'].state}%</span></span>` ]]]
However i do not see any color applied to my text. Could you point me in the direction of a solution please ?
custom_fields is an object not an array. So remove the dash in from of temperature and setpoint 
1 Like
That was my mistakes indeed, thank you
Understood. Though I love the ease of the templating, I must admit the responsiveness I experience now is such a huge difference, I wouldn’t want to go back on that. I’ll add the few hard coded entities 
So I’ve use this quarantine time to rebuild my while UI using mainly button-card, decluttering-card, card-mod, swiper-card, some picture-elements and a hell lot of yaml (almost 1000 lines of yaml for the button-card templates) 
I inspired myself with @Mattias_Persson’s UI (and also used the circle from his code 
)
The media-players are not using mini-media-player but button-card.
The goal was simple, less stuff, more info at a glance in one page and popups on hold_action for most of the cards (sensors would display a graph with mini-graph-card, lights would present a clean popup with color, brightness, effect based on what they support, etc…). And multimedia management of course
It’s a bit out of topic, but it gives you some examples of what you can achieve with button-card by tweaking it the way you want.
I’ll share some of my templates later
10 Likes
@RomRider, looks great. Ive been working on my UI trying to use this card where possible as its super versatile. I need to investigate the media player side of things as that looks good.
It would also be interesting to know how you are handling the YAML for popups. Do you use YAML mode or the UI Editors?
I wanted to setup separate files for each popup but i don’t want to loose the UI editor and switch to YAML only mode so for now i am just pointing out to a separate dashboard that contains a view to each room.
Example below of one of those views with my button card which is basically two button cards together (1 power toggle and 1 main card for more-info with a built in slider and custom SVG hue bulb icons)
3 Likes
I don’t like UI’s to configure stuff… I’m probably old school 
So I use only yaml… I’m kind of sad now that some of the integrations are only possible to configure with the UI 
I have one separate file for each popup, but they all call a decluttering-card template that embeds everything
I had that in place before with my old shitty and ugly UI, but I found it to be not very ergonomic (especially the fact that you had to go “back” with a button / swipe back to the first page every time)