I currently have my dashboard setup with Entities cards, which I like because there is a master switch at the top-right to toggle all the entities on/off:
I want to accomplish this same design and functionality with buttons, something like this:
I have not found a way to do this even with custom cards. Any help is greatly appreciated!
One way would be to create a script which triggers when you press the master button.
I thought of doing that, but I can't find a way to put the button inline with a title card.
I see, I completely missed that you still had the toggle switch on the card. You could probably create a light group and have the toggle switch control that and then use the buttons to control each light. I do that for several of the rooms in my condo. For example, my bedroom has four droplights that all function independently but on my dash board have I have one button for off, low, med, and high settings which triggers a script. I also have another button that triggers a popup light card if i want more control. You should be able to use a light group in a similar way with the toggle button.
I have been able to make some progress using Mushroom cards (specifically the Title cards that have tap actions and Template cards also). Still working out some things, but it's going in the right direction!
I have re-made it since using Mushroom cards instead of Button cards, but it is fairly similar:
The Title card:
type: custom:mushroom-title-card
title: Kitchen
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: -12px;
}
title_tap_action:
action: perform-action
perform_action: homeassistant.turn_off
target:
entity_id:
- switch.in_wall_smart_switch_120_277vac_2
- switch.in_wall_smart_switch_120_277vac_3
- switch.ge_quick_fit_smart_in_wall_paddle_switch
- switch.cabinet_lights
The Buttons:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(5, 1fr)
margin: 0px 0px 0px -4px
cards:
- type: custom:mushroom-light-card
entity: switch.in_wall_smart_switch_120_277vac_2
primary_info: none
secondary_info: none
fill_container: true
grid_options:
columns: 1
rows: 1.2
icon: mdi:pot-mix
layout: vertical
card_mod:
style:
.: |
ha-card {
height: 70px !important;
width: 70px;
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 32px;
--icon-size: 46px;
}
- type: custom:mushroom-light-card
entity: switch.in_wall_smart_switch_120_277vac_3
primary_info: none
secondary_info: none
fill_container: true
layout: vertical
grid_options:
columns: 1
rows: 1.2
icon: mdi:silverware
card_mod:
style:
.: |
ha-card {
height: 70px !important;
width: 70px;
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 32px;
--icon-size: 46px;
}
- type: custom:mushroom-light-card
entity: switch.ge_quick_fit_smart_in_wall_paddle_switch
primary_info: none
secondary_info: none
fill_container: true
layout: vertical
grid_options:
columns: 1
rows: 1.2
icon: mdi:faucet-variant
card_mod:
style:
.: |
ha-card {
height: 70px !important;
width: 70px;
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 32px;
--icon-size: 46px;
}
- type: custom:mushroom-light-card
entity: switch.cabinet_lights
primary_info: none
secondary_info: none
fill_container: true
layout: vertical
grid_options:
columns: 1
rows: 1.2
icon: ""
card_mod:
style:
.: |
ha-card {
height: 70px !important;
width: 70px;
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 32px;
--icon-size: 46px;
}
There are many ways to do this. Using a Group Helper and auto-entities is the least amount of YAML / templating I think. I did a quick/dirty, you can change all the visuals you'd like...
type: vertical-stack
cards:
- type: entities
show_header_toggle: false
entities:
- entity: light.living_room_dimmer_group
name: Living Room Lights
- type: custom:auto-entities
card:
type: grid
square: false
columns: 4
card_param: cards
filter:
template: >
[
{% for e in expand('light.living_room_dimmer_group') %}
{
"type": "button",
"entity": "{{ e.entity_id }}",
"name": "{{ e.name }}",
"tap_action": {
"action": "toggle"
}
},
{% endfor %}
]
Agreed(Auto-Entities is a solid method), but adding custom styles using the filter method you provided is not very clear cut for most.
@chris.reeve4 I'd suggest this as an alternative method
Create a switch group for the devices and then add a label like switch-group to those specific device. As Ltek mentioned, other methods are available so use this as a starting point.
type: custom:vertical-stack-in-card
cards:
- type: entities
show_header_toggle: false
entities:
- entity: switch.switch_test_group
name: Kitchen >
card_mod:
style:
hui-generic-entity-row$: |
state-badge {
display: none;
}
card_mod:
style: |
ha-card {
border: none;
font-size: 20px;
}
- type: custom:auto-entities
filter:
include:
- options:
type: custom:mushroom-entity-card
tap_action:
action: toggle
secondary_info: none
primary_info: none
icon_color: accent
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 32px;
--icon-size: 46px;
}
.: |
ha-card {
width: 70px;
margin-left: 10px;
border: none;
}
label: switch_group
card:
type: grid
columns: 4
card_param: cards
card_mod:
style: |
ha-card {
border: none;
font-size: 20px;
}
none of this, no method, is "easy" for anyone IMO 
I landed on the method I presented after trying several, for a few reasons...
hands down the simplest way to do this is with the built in cards, however it may not look exactly how you want.
type: entities
entities:
- entity: light.garage_temporary_laser
footer:
type: buttons
entities:
- update.button_card_update
- input_button.test
- button.fan_ping
- script.notify_alexa_ui
or
type: entities
entities:
- entity: light.garage_temporary_laser
- type: buttons
entities:
- update.button_card_update
- input_button.test
- button.fan_ping
- script.notify_alexa_ui
The method you suggested is 
customizable
Custom cards can be used as well
type: entities
entities:
- entity: switch.switch_test_group
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr
cards:
- type: custom:button-card
entity: light.end_table
color: auto
aspect_ratio: 1/1
show_icon: true
show_state: false
show_name: true
styles:
card:
- font-size: 10px
- type: custom:button-card
entity: light.pc_light
color: auto
aspect_ratio: 1/1
show_icon: true
show_state: false
show_name: true
tap_action:
action: more-info
styles:
card:
- font-size: 10px
- type: custom:button-card
entity: light.bathroom_lights
color: auto
aspect_ratio: 1/1
show_icon: true
show_state: false
show_name: true
styles:
card:
- font-size: 10px
- type: custom:button-card
entity: light.corner_stand
color: auto
aspect_ratio: 1/1
show_icon: true
show_state: false
show_name: true
styles:
card:
- font-size: 10px