Lovelace: Button card

yep, as @RomRider said, you’re defining the height/width. Remove that and use the aspect ratio field.

Can You be more specific? Can You show me how to use aspect_ratio to achieve similar effect as I’ve done with width and height parameters ?

You seem to be putting this on a pedestal. It’s very simple. Try it. Remove height and width from from the card style, add aspect_ratio: 1/1 to the root level of the card. Your top card has an aspect ratio of 2/1.

I don’t get it. Can you show me this on my code?
If I enter aspect_ratio I’ve got huge buttons:


Sure there is no space but cards are huge.
I want small 230x100px cards without spaces around

Edit:

OK I’ve manage something like that:

But it is not exactly what I want. Width of cards is too big.
Is there any way to shrink it by 20%?

You should use layout-card if you want to reduce the size of each the columns.

Thanks for this. I managed to work this out on my own but think yours is better. For those who want an image they can try mine.

Capture

type: 'custom:button-card'
entity: cover.x
custom_fields:
  down:
    card:
      type: 'custom:button-card'
      show_name: false
      size: 60%
      entity: |
        [[[ return entity.entity_id; ]]]
      icon: 'mdi:arrow-down'
      tap_action:
        action: call-service
        service: cover.close_cover
        service_data:
          entity_id: |
            [[[ return entity.entity_id; ]]]
  up:
    card:
      type: 'custom:button-card'
      size: 60%
      entity: |
        [[[ return entity.entity_id; ]]]
      icon: 'mdi:arrow-up'
      show_name: false
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: |
            [[[ return entity.entity_id; ]]]
  stop:
    card:
      type: 'custom:button-card'
      size: 60%
      entity: |
        [[[ return entity.entity_id; ]]]
      icon: 'mdi:stop'
      show_name: false
      tap_action:
        action: call-service
        service: cover.stop_cover
        service_data:
          entity_id: |
            [[[ return entity.entity_id; ]]]
styles:
  grid:
    - grid-template-areas: '"i i i i i" "n n n n n" ". up stop down ."'
    - grid-template-rows: min-content 1fr 2fr
    - grid-template-columns: 5% 1fr 1fr 1fr 5%
  card:
    - max-width: 150px
    - max-height: 150px
    - padding-bottom: 0

2 Likes

Thank you. I will try layout-card.

Hi,

I have this code:

color: auto
color_type: card
custom_fields:
  - card:
      entity: '[[[ return entity.entity_id ]]]'
      full_row: true
      hide_state: false
      hide_when_off: false
      styles:
        grid:
          - grid-template-areas: '"n" "i" "l" "slider"'
          - grid-template-columns: 1fr
      type: 'custom:slider-entity-row'
default_color: 'rgb(255, 233, 155)'
entity: light.yeelight
icon: 'mdi:lightbulb'
type: 'custom:button-card'

and look like this: slider

is it possible set more slider for yeelight? I can’t do that.
I need this but inside the button. not slider

Does anyone know how to fix this code, I get a syntax error:

state_display: '[[[ if (entity.state === "idle") return sensor.irrigation_watering_day; else return null ]]]'

The return sensor.irrigation_watering_day is incorrect but I can’t figure out how to fix it.

Try
states['sensor.irrigation_watering_day'].state

1 Like

Hey there,

i am still new to this awesome stuff and have a question.

I would like to have buttons for up and down in the following code:

icon: 'mdi:window-shutter'
size: 60%
aspect_ratio: 1/0.3
styles:
  card:
    - border-radius: 12px
    - '--paper-card-background-color': lightgrey
  icon:
    - grid-column: 1
    - grid-row: 1 / 4
    - height: 60px
    - width: 60px
    - border-radius: 100%
    - background: gold
  label:
    - font-size: 120px
  grid:
    - grid-template-areas: '"i s" "i vorn" "i links" "i rechts"'
    - grid-template-columns: 30% 70%
    - grid-template-rows: 25% 25% 25% 25%
  custom_fields:
    vorn:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
    links:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
      
    rechts:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
      
      
      
custom_fields:
  vorn: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]
  links: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]
     
  rechts: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]     

I made a scribble of it:

rollo

How could i achieve that?

see NovaG example code above, it has the arrows up and down and adds them to a button card.

First, your code is wrong because it’s missing slider below custom_fields and some things do not have the correct indentation (copy paste error?)
If you want to add more sliders, just do it the same way as you did it already and add new lines to the grid-template-areas:

color: auto
color_type: card
custom_fields:
  slider:
    card:
      entity: '[[[ return entity.entity_id ]]]'
      full_row: true
      hide_state: false
      hide_when_off: false
      type: 'custom:slider-entity-row'
  slider2:
    card:
      entity: OTHER_ENTITY
      full_row: true
      hide_state: false
      hide_when_off: false
      type: 'custom:slider-entity-row'
styles:
  grid:
    - grid-template-areas: '"n" "i" "l" "slider" "slider2"'
    - grid-template-columns: 1fr
entity: light.yeelight
icon: 'mdi:lightbulb'
type: 'custom:button-card'

Based on what you want to do, the best way will be to use position: absolute on those 2 custom_fields and use inspiration from this post

Hi RomRider,

for sure i am just to new to all this things. I tried to use the base of the mentioned post but in the end i did not achieve to get the up and down arrows for all three entries.
To be honest i just ended up in a mess card ;-(

type: 'custom:button-card'
icon: 'mdi:window-shutter'
size: 60%
aspect_ratio: 1/0.3
styles:
  card:
    - border-radius: 12px
    - '--paper-card-background-color': lightgrey
  icon:
    - grid-column: 1
    - grid-row: 1 / 4
    - height: 60px
    - width: 60px
    - border-radius: 100%
    - background: gold
  label:
    - font-size: 120px
  grid:
    - grid-template-areas: '"i s" "i vorn" "i links" "i rechts" "i runter" "i rauf" "i stop"'
    - grid-template-columns: 30% 10% 10% 10% 10% 20%
    - grid-template-rows: 25% 25% 25% 25%
  custom_fields:
    vorn:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
    links:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
    rechts:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
    runter:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
      - position: absolute
custom_fields:
  vorn: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]
  links: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]
     
  rechts: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]   
     
  runter:
    card:
      type: 'custom:button-card'
      show_name: false
      size: 06%
      entity: rollo_wohnzimmer_vorn
      position: absolute
      icon: 'mdi:arrow-down'
      tap_action:
        action: call-service
        service: cover.close_cover
        service_data:
          entity_id: rollo_wohnzimmer_vorn
  hoch:
    card:
      type: 'custom:button-card'
      size: 60%
      entity: rollo_wohnzimmer_vorn
      position: absolute
      icon: 'mdi:arrow-up'
      show_name: false
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: rollo_wohnzimmer_vorn
  stop:
    card:
      type: 'custom:button-card'
      size: 60%
      entity: rollo_wohnzimmer_vorn
      position: absolute
      icon: 'mdi:stop'
      show_name: false
      tap_action:
        action: call-service
        service: cover.stop_cover
        service_data:
          entity_id: rollo_wohnzimmer_vorn

rollo1

It’s almost correct :slight_smile:

That should give you something to work with:

type: 'custom:button-card'
icon: 'mdi:window-shutter'
size: 60%
aspect_ratio: 1/0.3
styles:
 card:
   - border-radius: 12px
   - '--paper-card-background-color': lightgrey
 icon:
   - grid-column: 1
   - grid-row: 1 / 4
   - height: 60px
   - width: 60px
   - border-radius: 100%
   - background: gold
 label:
   - font-size: 120px
 grid:
   - grid-template-areas: '"i s" "i vorn" "i links" "i rechts"'
   - grid-template-columns: 30% 70%
   - grid-template-rows: 25% 25% 25% 25%
   - position: relative
 custom_fields:
   vorn:
     - align-self: start
     - justify-self: start
     - font-size: 10px
     - line-height: 10%
     - color: var(--secondary-text-color)
   links:
     - align-self: start
     - justify-self: start
     - font-size: 10px
     - line-height: 10%
     - color: var(--secondary-text-color)
   rechts:
     - align-self: start
     - justify-self: start
     - font-size: 10px
     - line-height: 10%
     - color: var(--secondary-text-color)
   runter:
     - color: var(--secondary-text-color)
     - position: absolute
     - bottom: 0% # Play with those to move them around
     - left: 95% # Play with those to move them around
   hoch:
     - color: var(--secondary-text-color)
     - position: absolute
     - top: 0% # Play with those to move them around
     - left: 95% # Play with those to move them around
   stop:
     - color: var(--secondary-text-color)
     - position: absolute
     - top: 50% # Play with those to move them around
     - left: 95% # Play with those to move them around
custom_fields:
 vorn: |
   [[[
       return `<ha-icon
         icon="mdi:window-shutter"
         style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
         </ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
    ]]]
 links: |
   [[[
       return `<ha-icon
         icon="mdi:window-shutter"
         style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
         </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
    ]]]
    
 rechts: |
   [[[
       return `<ha-icon
         icon="mdi:window-shutter"
         style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
         </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
    ]]]   
    
 runter:
   card:
     type: 'custom:button-card'
     show_name: false
     size: 06%
     entity: rollo_wohnzimmer_vorn
     icon: 'mdi:arrow-down'
     tap_action:
       action: call-service
       service: cover.close_cover
       service_data:
         entity_id: rollo_wohnzimmer_vorn
 hoch:
   card:
     type: 'custom:button-card'
     size: 60%
     entity: rollo_wohnzimmer_vorn
     icon: 'mdi:arrow-up'
     show_name: false
     tap_action:
       action: call-service
       service: cover.open_cover
       service_data:
         entity_id: rollo_wohnzimmer_vorn
 stop:
   card:
     type: 'custom:button-card'
     size: 60%
     entity: rollo_wohnzimmer_vorn
     icon: 'mdi:stop'
     show_name: false
     tap_action:
       action: call-service
       service: cover.stop_cover
       service_data:
         entity_id: rollo_wohnzimmer_vorn

With absolute positioning you don’t have to add them to the grid.

Hi RomRider,

thanks for helping once again.

I tried the code and duplicated the custom fields three times. In the end the buttons work correct but i can´t arrange them in the lines. The buttons theme to overwrite the labeltext and the other buttons:

type: 'custom:button-card'
icon: 'mdi:window-shutter'

aspect_ratio: 1/0.3
styles:
  card:
    - border-radius: 12px
    - '--paper-card-background-color': lightgrey
  icon:
    - grid-column: 1
    - grid-row: 1 / 4
    - height: 60px
    - width: 60px
    - border-radius: 100%
    - background: gold
  label:
    - font-size: 120px
  grid:
    - grid-template-areas: '"i s" "i vorn" "i links" "i rechts"'
    - grid-template-columns: 30% 70%
    - grid-template-rows: 25% 25% 25% 25%
    - position: relative
  custom_fields:
    vorn:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
    links:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
    rechts:
      - align-self: start
      - justify-self: start
      - font-size: 10px
      - line-height: 10%
      - color: var(--secondary-text-color)
    runter1:
      - position: absolute
      - top: 40%
      - left: 65%
    hoch1:
      - color: var(--secondary-text-color)
      - position: absolute
      - left: 85%
      - top: 5%
    stop1:
      - color: var(--secondary-text-color)
      - position: absolute
      - top: 10%
      - left: 75%
    runter2:
      - color: var(--secondary-text-color)
      - position: absolute
      - top: 0%
      - left: 65%
    hoch2:
      - color: green
      - position: absolute
      - top: 0%
      - left: 85%
    stop2:
      - color: green
      - position: absolute
      - top: 60%
      - left: 75%
    runter3:
      - color: red
      - position: absolute
      - top: 90%
      - left: 65%
    hoch3:
      - color: red
      - position: absolute
      - top: 10%
      - left: 85%
    stop3:
      - color: var(--primary-line-color);
      - position: absolute
      - top: 30%
      - left: 75%
custom_fields:
  vorn: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]
  links: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]
     
  rechts: |
    [[[
        return `<ha-icon
          icon="mdi:window-shutter"
          style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
          </ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
     ]]]   
     
  runter1:
    card:
      type: 'custom:button-card'
      show_name: false
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:arrow-down'
      tap_action:
        action: call-service
        service: cover.close_cover
        service_data:
          entity_id: rollo_wohnzimmer_vorn
  hoch1:
    card:
      type: 'custom:button-card'
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:arrow-up'
      show_name: false
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: rollo_wohnzimmer_vorn
  stop1:
    card:
      type: 'custom:button-card'
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:stop'
      show_name: false
      tap_action:
        action: call-service
        service: cover.stop_cover
        service_data:
          entity_id: rollo_wohnzimmer_vorn
  runter2:
    card:
      type: 'custom:button-card'
      show_name: false
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:arrow-down'
      tap_action:
        action: call-service
        service: cover.close_cover
        service_data:
          entity_id: rollo_wohnzimmer_vorn
  hoch2:
    card:
      type: 'custom:button-card'
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:arrow-up'
      show_name: false
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: cover.rollo_wohnzimmer_vorn
  stop2:
    card:
      type: 'custom:button-card'
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:stop'
      show_name: false
      tap_action:
        action: call-service
        service: cover.stop_cover
        service_data:
          entity_id: cover.rollo_wohnzimmer_vorn
  runter3:
    card:
      type: 'custom:button-card'
      show_name: false
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:arrow-down'
      tap_action:
        action: call-service
        service: cover.close_cover
        service_data:
          entity_id: cover.rollo_wohnzimmer_vorn
  hoch3:
    card:
      type: 'custom:button-card'
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:arrow-up'
      show_name: false
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: cover.rollo_wohnzimmer_vorn
  stop3:
    card:
      type: 'custom:button-card'
      size: 10%
      entity: rollo_wohnzimmer_vorn
      icon: 'mdi:stop'
      show_name: false
      tap_action:
        action: call-service
        service: cover.stop_cover
        service_data:
          entity_id: cover.rollo_wohnzimmer_vorn

Furthermore the buttons seem to have different sizes even though they are defined all the same way.
COuld you help me once again and another question: is the way i am going on right or is there a easier way than duplicate the custom_fields?

image

Tried to find the answer in the thread, but it is a long post…:slight_smile:

I have a set of binary sensors (doors open, windows open, lights on, smoke alerts, etc…). I want to combine the button card with a conditional card, so that the card is only visible when the sensor turns to on. Do I need to create a card for each sensor or can I use a “*” in some way to include them all in one shot so that only then ones that are “on” are visible on the page ?. Sort of mimicking what entity-filter card does but with more flexibility on the look & feel ?

my code below, for one entity, I have 12 more…

card:
  color: red
  entity: binary_sensor.smoke_gst_bath
  icon: 'mdi:alert'
  name: Guest Bath Smoke
  state:
    - color: transparent
      label: ''
      styles:
        card:
          - animation: none
      value: 'off'
  styles:
    card:
      - animation: blink 2s ease infinite
      - height: 200px
  type: 'custom:button-card'
conditions:
  - entity: binary_sensor.smoke_gst_bath
    state: 'on'
type: conditional

Alternatively, can the button-card be nested in the auto-entities card ?

This is what I have working for my cameras batteries, works well but the look is kind of basic. I am thinking only the batteries that are below say 45% would show with a warning button card ?

ok thanks, sorry for getting back to you with some delay.

most importantly would be getting this right:

this is supposed to be a grid of 4 (which I now create by default by having 4 buttons with aspect ratio 1/1 on a single line, and create a gap with an empty card. The smaller button above those should also be 2 buttons wide, this doesnt work with the button card setup though, using a blank card, a title button with an adapted ratio, and again an empty card. The system sees it still as 3 cards, and dives these in 3ds perfectly…

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        color_type: blank-card

      - type: 'custom:button-card'
        entity: light.library_lights
        template: button_title_counter
        aspect_ratio: 4/1
        label: Library

      - type: custom:button-card
        color_type: blank-card

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: button_light
        entity: light.hobby_corner

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        template: button_light
        name: Gamers Tv
        entity: light.tv_backlight

Would you be able to show me how to do that with the layout card?

These cards look incredible! I am starting a make-over of my lovelace and tried to follow this. I don’t get your code to work as it should, because of my lack of understanding:

  1. What is this first image (‘transparent_’ ~ ‘to’.join(ratio.split(’/’)) ~ ‘.png’). Is this an actual image I need to create, and what image should that actually be?
  2. Without the image above, it functions, but the default scaling is off (the info cicle in the top left is moved up and cut-off for a part. with ration=1.2/1 I get all info on the button, but I would expect this to work with the default 1/1, not?
  3. I cannot get the graph to display (might be connected to the missing image above). Any help appreciated:
    My simple lovelace code using your code as-is:
# lovelace_gen
title: Test
icon: mdi:test-tube
cards:
- type: horizontal-stack
  cards:
  - !include
    - '../includes/graph_button.yaml'
    - imgratio: 1/1
      entity: sensor.dsmr_reading_electricity_currently_delivered
      color: '#ff3300'
      ratio: 1.2/1
      icon: mdi:flash
  - !include
    - '../includes/graph_button.yaml'
    - imgratio: 1/1
      entity: sensor.dsmr_reading_electricity_currently_delivered
      color: '#ff3300'
      ratio: 1/1
      icon: mdi:flash
  - !include
    - '../includes/graph_button.yaml'
    - imgratio: 1/1
      entity: sensor.dsmr_reading_electricity_currently_delivered
      color: '#ff3300'
      ratio: 1/1
      icon: mdi:flash

Since I updated to HA 0.110 I have some problems with button card. I use it in my Dwains Theme and inside the buttons I read and use a lot of states. Sometime when I enter a lovelace view I get:
https://camo.githubusercontent.com/d5efeddbc447390a5f685bf67719858ccd54457a/687474703a2f2f7075752e73682f46524c44462f333531663766663832362e706e67

https://github.com/custom-cards/button-card/issues/337

I also opened an issue for this, I hope you got time to look into this soon because now my theme won’t work in HA 0.100.* and I don’t got the time myself to look for the error and make a PR :frowning: