examples

Examples

Table of Contents

1. Simple icon button
2. On/Off button
3. Light icon button with more_info
4. Light icon button with text
5. Light icon button with custom style
6. Light icon card button
7. Stack of light buttons
8. Volume up buttons with service call and blank cards
9. Scene setting buttons with label card
10. Input select card with select next service and custom color for states

Simple icon button

Show a button for the air conditioner (blue when on):

- type: "custom:button-card"
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)

---

On/Off button

Show an On/Off button for the home_lights group:

- type: "custom:button-card"
  entity: group.home_lights
  show_state: true

---

Light icon button with more_info

Light entity with custom icon and "more info" pop-in:

- type: "custom:button-card"
  entity: light.living_room_lights
  icon: mdi:sofa
  color: auto
  action: more_info

---

Light icon button with text

Light card with text:

- type: "custom:button-card"
  entity: light.living_room_lights
  icon: mdi:sofa
  color: auto
  name: Living room

---

Light icon button with custom style

Light card with text and custom style:

- type: "custom:button-card"
  entity: light._
  icon: mdi:home
  color: auto
  action: more_info
  name: Home
  style:
    - text-transform: none
    - color: rgb(28, 128, 199)
    - font-weight: bold

Light icon card button

---

Light card with card color type, name, and automatic color:

- type: "custom:button-card"
  entity: light._
  icon: mdi:home
  color: auto
  color_type: card
  default_color: rgb(255, 233, 155)
  action: more_info
  name: Home
  style:
    - font-size: 12px
    - font-weight: bold

---

Stack of light buttons

Home + all rooms in an horizontal stack

- type: horizontal-stack
  cards:
    - type: "custom:button-card"
      entity: light.living_room_lights
      icon: mdi:sofa
      color: auto
      action: more_info
      default_color: rgb(255, 233, 155)
      color_type: card
      name: Living room
      style:
        - font-size: 12px
        - font-weight: bold
    - type: "custom:button-card"
      entity: light.harry
      color: auto
      icon: mdi:ceiling-light
      action: more_info
      name: Ceiling
      style:
        - font-size: 12px
        - font-weight: bold
    - type: "custom:button-card"
      entity: light.ron
      color: auto
      icon: mdi:lamp
      action: more_info
      name: TV
      style:
        - font-size: 12px
        - font-weight: bold
    - type: "custom:button-card"
      entity: light.snape
      icon: mdi:floor-lamp
      color: auto
      action: more_info
      name: Floor
      style:
        - font-size: 12px
        - font-weight: bold

---

Volume up buttons with service call and blank cards

Horizontal stack with :

• 2x blank cards
• 1x volume up button with service call
• 1x volume down button with service call
• 2x blank cards

- type: horizontal-stack
  cards:
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: card
      color: rgb(223, 255, 97)
      icon: mdi:volume-plus
      action: service
      service:
        domain: media_player
        action: volume_up
        data:
          entity_id: media_player.livimg_room_speaker
    - type: "custom:button-card"
      color_type: card
      color: rgb(223, 255, 97)
      icon: mdi:volume-minus
      action: service
      service:
        domain: media_player
        action: volume_down
        data:
          entity_id: media_player.livimg_room_speaker
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: blank-card

---

Scene setting buttons with label card

Vertical Stack with :

• 1x label card
• Horizontal Stack with :
  • 1x Scene 1 Button
  • 1x Scene 2 Button
  • 1x Scene 3 Button
  • 1x Scene 4 Button
  • 1x Scene Off Button

- type: vertical-stack
 cards:
   - type: "custom:button-card"
     color_type: label-card
     color: rgb(44, 109, 214)
     name: Kitchen
   - type: horizontal-stack
     cards:
       - type: "custom:button-card"
         entity: switch.kitchen_scene_1
         color_type: card
         color: rgb(66, 134, 244)
         icon: mdi:numeric-1-box-outline
       - type: "custom:button-card"
         entity: switch.kitchen_scene_2
         color_type: card
         color: rgb(66, 134, 244)
         icon: mdi:numeric-2-box-outline
       - type: "custom:button-card"
         entity: switch.kitchen_scene_3
         color_type: card
         color: rgb(66, 134, 244)
         icon: mdi:numeric-3-box-outline
       - type: "custom:button-card"
         entity: switch.kitchen_scene_4
         color_type: card
         color: rgb(66, 134, 244)
         icon: mdi:numeric-4-box-outline
       - type: "custom:button-card"
         entity: switch.kitchen_off
         color_type: card
         color: rgb(66, 134, 244)
         icon: mdi:eye-off-outline

Input select card with select next service and custom color for states.

              - type: "custom:button-card"
                entity: input_select.cube_mode
                icon: mdi:cube
                action: service
                show_state: true
                state:
                  - value: 'sleeping'
                    color: var(--disabled-text-color)
                  - value: 'media'
                    color: rgb(5, 147, 255)
                  - value: 'light'
                    color: rgb(189, 255, 5)