Awesome
Button Entity Row
Creates a row of buttons to be placed in an entities card.
Options
| Name | Type | Requirement | Description |
|---|---|---|---|
| type | string | Required | custom:button-entity-row |
| buttons | string or Button | Required | List of buttons to display. |
Button Object
| Name | Type | Requirement | Description |
|---|---|---|---|
| entity | string | Optional | The entity_id of the entity you want to show. |
| name | string | Optional | Name to use for entity. |
| icon | string | Optional | Material design icon to display. |
| state_icons | {[state: string]: string} | Optional | Material icon for each specific state of the entity. |
| state_styles | {[state: string]: string} | Optional | CSS styles to apply to the button for a specific state. |
| state_icon_styles | {[state: string]: string} | Optional | CSS styles to apply to the icon for a specific state. |
| style | object | Optional | CSS styles to apply to the button. |
| icon_style | object | Optional | CSS styles to apply to the icon. |
| service | string | Optional | The Home Assistant service to call when the button is clicked. |
| service_data | object | Optional | Service data to be sent with the service call. |
Usage
You can specify directly an entity name or use the Button object.
resources:
- url: /community_plugin/button-entity-row/button-entity-row.js
type: module
Basic setup.
type: entities
entities:
- entity: light.bedroom_light
- type: "custom:button-entity-row"
buttons:
- scene.daylight
- entity: script.light_colour_flow
name: Flow
- scene.evening
- scene.rave
Using state icons.
type: entities
entities:
- entity: light.dining_room
- type: "custom:button-entity-row"
buttons:
- entity: script.pause_kitchen_motion
icon: "mdi:pause"
name: 1 hour
style:
- color: var(--primary-color)
- entity: input_boolean.kitchen_motion_sensor
name: Detect motion
state_icons:
"off": "mdi:eye-off"
"on": "mdi:motion-sensor"
Some css styling, icons and icon-name buttons.
type: entities
entities:
- entity: light.bedroom_light
- type: "custom:button-entity-row"
buttons:
- entity: scene.daylight
icon: "mdi:brightness-5"
style:
- color: white
- entity: script.light_colour_flow
icon: "mdi:all-inclusive"
style:
- color: white
- entity: scene.evening
icon: "mdi:brightness-3"
style:
- color: white
- entity: scene.rave
icon: "mdi:track-light"
name: Rave
style:
- color: white
Multiple rows of buttons.
type: entities
entities:
- entity: light.monitor_leds
- type: "custom:button-entity-row"
buttons:
- entity: scene.office_standard
icon: "mdi:lightbulb-on"
style:
- color: var(--primary-color)
- entity: scene.office_orange
icon: "mdi:lightbulb-on"
style:
- color: "rgb(255,126,0)"
- type: "custom:button-entity-row"
buttons:
- icon: "mdi:lightbulb-off-outline"
service: homeassistant.turn_off
service_data:
entity_id: group.office_lights
style:
- color: white
Using custom styles/icons, specific to the state:
type: entities
entities:
- entity: switch.entrance
- type: "custom:button-entity-row"
buttons:
- entity: input_boolean.alarm
name: Alarm System
style:
background: lightgray
border-radius: 9999px
state_icons:
"off": "mdi:shield-home"
"on": "mdi:lock-open"
state_styles:
"off":
color: red
font-weight: bold
"on":
color: green
Default Entities Map to Services
| Domain | Service |
|---|---|
| automation | automation.toggle |
| cover | cover.toggle |
| fan | fan.toggle |
| input_boolean | input_boolean.toggle |
| light | light.toggle |
| script | script.toggle |
| switch | switch.toggle |
| vacuum | vacuum.toggle |
| media_player | media_player.media_play_pause |
| scene | scene.turn_on |
If no service is specified for a given button,
and there is no default value corresponding to its specific domain (eg.: binary_sensor),
the "more-info" modal of the entity will be shown instead (if any).
Full Configuration Examples
resources:
- url: /community_plugin/button-entity-row/button-entity-row.js
type: module
views:
- title: Home
id: home
cards:
- type: entities
title: Living Room Lights
show_header_toggle: false
entities:
- type: "custom:button-entity-row"
buttons:
# full configuration example
- icon: mdi:lightbulb-on
style:
color: yellow
name: "On"
service: scene.turn_on
service_data:
entity_id: scene.lights_up
# basic entity, uses hass configured icon to display
- scene.lights_out
# entity with some overrides
- icon: mdi:movie
name: Movie
entity: scene.movie_lights
You can also specify multiple rows of buttons
resources:
- url: /community_plugin/button-entity-row/button-entity-row.js
type: module
views:
- title: Home
id: home
cards:
- type: entities
title: Living Room Lights
show_header_toggle: false
entities:
- type: "custom:button-entity-row"
buttons:
- - switch.light_1
- switch.light_2
- - media_player.roku
- light.lamp