diff --git a/source/_dashboards/button.markdown b/source/_dashboards/button.markdown index c7eed878e8c..25183613562 100644 --- a/source/_dashboards/button.markdown +++ b/source/_dashboards/button.markdown @@ -128,7 +128,12 @@ type: button entity: light.living_room ``` -Button card with a button name and a script that runs when card is tapped: +Button card with a button name and a [script](/docs/scripts/) that runs when card is tapped: + +

+Screenshot of the Button card with script service +Screenshot of the button card with script service. +

```yaml type: button @@ -141,7 +146,60 @@ tap_action: entity_id: script.turn_off_lights ``` +Example of 4 buttons on a vertical stack card: +

-Screenshot of the Button card with script service -Screenshot of the button card with script service. +Screenshot of a vertical stack card with 4 buttons and an entity selector +Screenshot of a vertical stack card with 4 buttons and an entity selector.

+ +The image shows a vertical stack card with 4 buttons arranged in a horizontal stack card and an entity selector. The buttons use the toggle action to run a script, for example, the Netflix script, which starts up the TV and opens Netflix. To learn how to create scripts, refer to [scripts](/docs/scripts/). + +```yaml +cards: + - entities: + - entity: input_select.living_room_scene + name: Scene + show_header_toggle: false + type: entities + - type: horizontal-stack + cards: + - name: Watch Netflix + entity: script.netflix + type: button + tap_action: + action: toggle + hold_action: + action: more-info + show_name: true + show_icon: true + - name: Watch YouTube + entity: script.youtube + type: button + tap_action: + action: toggle + hold_action: + action: more-info + show_name: true + show_icon: true + - name: Wake PC + entity: script.wake_on_lan + type: button + tap_action: + action: toggle + icon: mdi:desktop-tower + show_name: true + show_icon: true + show_state: false + - name: Go to sleep + entity: script.sleep + type: button + tap_action: + action: toggle + icon: mdi:sleep + hold_action: + action: more-info + show_name: true + show_icon: true +type: vertical-stack +``` diff --git a/source/images/dashboards/buttons_on_vertical_stack_card.png b/source/images/dashboards/buttons_on_vertical_stack_card.png new file mode 100644 index 00000000000..3b659e4ae8a Binary files /dev/null and b/source/images/dashboards/buttons_on_vertical_stack_card.png differ