Add buttons for predefined brightness to entities card

Configuration Frontend
1

I have an entities card:

image

I would like to add some buttons in the footer of this card, something like in this mockup I have produced in MS Paint:

image

What I have tried is: Under “Helpers” I have created a button button.free because apparently footer buttons have to reference an entity, so I need a button to start with.

Then I have added this code to my card:

type: entities
entities:
  - entity: light.osram_sylvania_zigbee_3_0_dali_conv_li_9ad2ce15_level_on_off
show_header_toggle: false
footer:
  type: buttons
  entities:
    - entity: input_button.free # <- Apparently this must be set, so we always need a helper button to start with
      name: 10 %
      tap_action:
        action: call-service
        service: light.turn_on
        service_data:
          brightness_pct: 10
          entity_id: light.osram_sylvania_zigbee_3_0_dali_conv_li_9ad2ce15_level_on_off

This gives me:

image

That’s not too bad, but I would like to get rid of the icon and the gray background and maybe the separator line. The font is also a bit small.

I tried removing the icon by adding show_icon: false after name because actual button cards can do that and I thought maybe they’re related. And indeed the icon disappears in the blurry preview, but the editor explodes with errors and doesn’t let me save:

image
image1901×859 92.6 KB

2

It’s not exactly what you asked for but look in HACS for “light-brightness-preset-row”

3

Throwing an in a few more options:

You can continue your current method and use card-mod to tweak styles.

You could use a grid instead of the footer. You can’t span columns, so the top entity and the grid below it might not look connected/united in a way you like. There’s an alternative though.

Then there’s the incredibly flexible custom button card where you can have buttons in buttons. It will be a bit of work though.

4

I’m not sure if you can use actions in footers, but you can use a button row in an entities card. Using it as a “last” line isn’t strictly a footer, but with a divider in between it might look like one ;-).

type: entities
entities:
  - entity: light.osram_sylvania_zigbee_3_0_dali_conv_li_9ad2ce15_level_on_off
  - type: divider
  - type: buttons
    entities:
      - entity: light.osram_sylvania_zigbee_3_0_dali_conv_li_9ad2ce15_level_on_off
        name: 10%
        show_icon: false
        tap_action:
          action: call-service
          service: light.turn_on
          service_data:
            brightness_pct: 10
            entity_id: light.osram_sylvania_zigbee_3_0_dali_conv_li_9ad2ce15_level_on_off
show_header_toggle: false

You can further customise the icon / image if you want:

5

For now I used a grid card with buttons in it, looks decent enough:

image

1 Like