{"id":13588422,"url":"https://github.com/jcwillox/lovelace-paper-buttons-row","last_synced_at":"2025-05-16T13:07:24.244Z","repository":{"id":41165815,"uuid":"244872232","full_name":"jcwillox/lovelace-paper-buttons-row","owner":"jcwillox","description":"Adds highly configurable buttons that use actions and per-state styling.","archived":false,"fork":false,"pushed_at":"2025-05-08T19:56:07.000Z","size":1492,"stargazers_count":338,"open_issues_count":68,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-08T20:40:41.729Z","etag":null,"topics":["actions","buttons","haptic","home-assistant","paper"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcwillox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"ko_fi":"jcwillox"}},"created_at":"2020-03-04T10:31:43.000Z","updated_at":"2025-05-08T11:21:20.000Z","dependencies_parsed_at":"2023-11-10T07:15:51.343Z","dependency_job_id":"a5e34b51-9690-4503-9a27-c915bb26103c","html_url":"https://github.com/jcwillox/lovelace-paper-buttons-row","commit_stats":{"total_commits":161,"total_committers":4,"mean_commits":40.25,"dds":"0.44099378881987583","last_synced_commit":"51525db3a22e8ff1f2e39b67c79cba7380259d4f"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcwillox%2Flovelace-paper-buttons-row","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcwillox%2Flovelace-paper-buttons-row/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcwillox%2Flovelace-paper-buttons-row/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcwillox%2Flovelace-paper-buttons-row/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcwillox","download_url":"https://codeload.github.com/jcwillox/lovelace-paper-buttons-row/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535829,"owners_count":22087399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["actions","buttons","haptic","home-assistant","paper"],"created_at":"2024-08-01T15:06:42.305Z","updated_at":"2025-05-16T13:07:24.225Z","avatar_url":"https://github.com/jcwillox.png","language":"TypeScript","funding_links":["https://ko-fi.com/jcwillox"],"categories":["TypeScript","Dashboard Cards"],"sub_categories":["📐 Layout helpers"],"readme":"# Paper Buttons Row\n\n[![HACS Badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration)\n[![License](https://img.shields.io/github/license/jcwillox/lovelace-paper-buttons-row?style=for-the-badge)](https://github.com/jcwillox/lovelace-paper-buttons-row/blob/main/LICENSE)\n[![Latest Release](https://img.shields.io/github/v/release/jcwillox/lovelace-paper-buttons-row?style=for-the-badge)](https://github.com/jcwillox/lovelace-paper-buttons-row/releases)\n[![GZIP Size](https://img.badgesize.io/https:/github.com/jcwillox/lovelace-paper-buttons-row/releases/latest/download/paper-buttons-row.js?style=for-the-badge\u0026compression=gzip)](https://github.com/jcwillox/lovelace-paper-buttons-row/releases)\n\nThis is a complete rewrite of the original [`button-entity-row`](https://github.com/custom-cards/button-entity-row) plugin, that is more consistent with Home Assistant's [button card](https://www.home-assistant.io/lovelace/button/), it uses **actions** including `tap_action`, `double_tap_action` and `hold_action` allowing for greater customisation of the buttons behaviour. It also retains the ability to style the button based on state, but adds the ability to style the icon, text, and ripple effect separately. There is a new option for **icon alignment** and the buttons have haptic feedback.\n\n![example-main](examples/example-5.gif)\n\n## Options\n\n| Name         | Type                                                  | Requirement  | Description                                                                                                                                           |\n| ------------ | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type         | `string`                                              | **Required** | `custom:paper-buttons-row`                                                                                                                            |\n| preset       | `string`                                              | **Optional** | The preset configuration to use e.g. `mushroom`. [See presets](#presets)                                                                              |\n| buttons      | List [`string` or [`button object`](#button-options)] | **Required** | List of buttons to display. [See button options](#button-options)                                                                                     |\n| base_config  | [`button object`](#button-options)                    | **Optional** | Specify a base config that will be deep-merged with each buttons config. Buttons can override the base config                                         |\n| styles       | `object`                                              | **Optional** | CSS styles to apply to the entire button group. e.g. to change the flex-box alignment.                                                                |\n| extra_styles | `string`                                              | **Optional** | Inject CSS directly into the paper-buttons-row container, useful for animations. [See extra styles](#extra-styles)                                    |\n|              |                                                       |              |                                                                                                                                                       |\n| position     | `\"center\"` \\| `\"right\"`                               | **Optional** | Position embedded buttons in the middle or end of the entity-row (default: `center`). [See embedding in entity rows](#embedding-in-other-entity-rows) |\n| hide_badge   | `boolean`                                             | **Optional** | Hide state badge when embedding in an entity-row                                                                                                      |\n| hide_state   | `boolean`                                             | **Optional** | Hide state text or toggle when embedding in an entity-row                                                                                             |\n\n### Button Options\n\nWhen only an `entity` is provided the button will attempt to toggle it by default.\n\n| Name              | Type                                           | Requirement  | Description                                                                                                                                      |\n| ----------------- | ---------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| entity            | `string`                                       | **Optional** | The entity_id of the entity you want to show.                                                                                                    |\n| name              | `string` \\| [`template`](#templating)          | **Optional** | Name to use for entity. Use `false` to hide name.                                                                                                |\n| state             | `string` \\| [`template`](#templating)          | **Optional** | State to display for entity. Use `true` to show the entity state.                                                                                |\n| icon              | `string` \\| [`template`](#templating)          | **Optional** | The icon to display. Use `false` to hide icon.                                                                                                   |\n| image             | `string` \\| [`template`](#templating)          | **Optional** | Display an image instead of an icon. e.g. `/local/custom.png`.                                                                                   |\n| preset            | `string`                                       | **Optional** | The preset configuration to use e.g. `mushroom`. [See presets](#presets)                                                                         |\n| active            | `string` \\| `list[string]`                     | **Optional** | Configure the states which the button considers itself to be active, defaults to [`on`, `open`, `unlocked`]. [See CSS variables](#css-variables) |\n| ripple            | `\"fill\"` \\| `\"none\"` \\| `\"circle\"`             | **Optional** | Override the default shape of the ripple.                                                                                                        |\n| layout            | `string` \\| `object`                           | **Optional** | Change the layout of the icon, name and state fields. [See layout options](#layout)                                                              |\n| tooltip           | `string`                                       | **Optional** | Override the default tooltip. Use `false` to hide tooltip.                                                                                       |\n|                   |                                                |              |                                                                                                                                                  |\n| tap_action        | `map`                                          | **Optional** | Tap action map [See action options](#action-options)                                                                                             |\n| hold_action       | `map`                                          | **Optional** | Hold action map [See action options](#action-options)                                                                                            |\n| double_tap_action | `map`                                          | **Optional** | Double Tap action map [See action options](#action-options)                                                                                      |\n|                   |                                                |              |                                                                                                                                                  |\n| styles            | [`style object`](#style-options) (templatable) | **Optional** | Map of CSS styles to apply to the button, icon, text or ripple. [See style options](#style-options)                                              |\n| state_styles      | `map[state: style object]`                     | **Optional** | Map of states to a [`style object`](#style-options), [See example](#using-style-and-state_styles).                                               |\n| state_icons       | `map[state: icon]`                             | **Optional** | Material icon for each state of the entity. Map state to icon, [See example](#using-state-icons-state-text-and-actions).                         |\n| state_text        | `map[state: text]`                             | **Optional** | Button text for each state of the entity, Map state to text, [See example](#using-state-icons-state-text-and-actions).                           |\n\n### Action Options\n\nEach button supports the same actions as seen in Home Assistant's [button card](https://www.home-assistant.io/lovelace/button).\n\n| Name              | Type           | Default  | Supported options                                                                                   | Description                                                                                                         |\n| ----------------- | -------------- | -------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| `action`          | `string`       | `toggle` | `more-info`, `toggle`, `call-service`, `fire-event`, `none`, `navigate`, `url`                      | Action to perform                                                                                                   |\n| `entity`          | `string`       | none     | Any entity id                                                                                       | **Only valid for `action: more-info`** to override the entity on which you want to call `more-info`                 |\n| `navigation_path` | `string`       | none     | Eg: `/lovelace/0/`                                                                                  | Path to navigate to (e.g. `/lovelace/0/`) when action defined as navigate                                           |\n| `url_path`        | `string`       | none     | Eg: `https://www.google.com`                                                                        | URL to open on click when action is `url`.                                                                          |\n|                   |                |          |                                                                                                     |                                                                                                                     |\n| `service`         | `string`       | none     | Any service                                                                                         | Service to call (e.g. `remote.send_command`) when `action` defined as `call-service`                                |\n| `service_data`    | `map`          | none     | Any service data                                                                                    | Service data to include (e.g. `command: play_pause`) when `action` defined as `call-service`.                       |\n| `target`          | `map`          | none     | Any service target                                                                                  | Service target to include (e.g. `entity_id: remote.bedroom`) when `action` defined as `call-service`.               |\n|                   |                |          |                                                                                                     |                                                                                                                     |\n| `event_type`      | `string`       | none     | Any event                                                                                           | Event to call (e.g. `custom_event`) when `action` defined as `fire-event`                                           |\n| `event_data`      | `map`          | none     | Any event data                                                                                      | Event data to include when `action` defined as `fire-event`.                                                        |\n|                   |                |          |                                                                                                     |                                                                                                                     |\n| `repeat`          | `number`       | none     | Eg: `500`                                                                                           | **Only valid for `hold_action`** optionally set the action to repeat every N milliseconds while the button is held. |\n|                   |                |          |                                                                                                     |                                                                                                                     |\n| `confirmation`    | `boolean\\|map` | false    | [See confirmation object](https://www.home-assistant.io/lovelace/actions/#options-for-confirmation) | Present a confirmation dialog to confirm the action.                                                                |\n\n### Presets\n\nA preset is just a predefined [button config](#button-options) object that will be deep-merged with the config, just like the `base_config` option.\n\n**Built-in Presets**\n\nPresets are now supported by default only the `mushroom` preset is included.\n\n![example-mushroom-light](examples/mushroom-light.png)\n\n![example-mushroom-dark](examples/mushroom-dark.png)\n\n```yaml\ntype: entities\nentities:\n  - type: custom:paper-buttons-row\n    # apply to all buttons\n    preset: mushroom\n    base_config:\n      # the same as above applies to all buttons\n      preset: mushroom\n    buttons:\n      - entity: light.bedroom_light\n        # or override on a button level\n        preset: mushroom\n\n      - entity: lock.front_door\n        # set what state is considered active\n        active: unlocked\n        styles:\n          # override the inactive color\n          --pbs-button-rgb-color: red\n          # override the active color\n          --pbs-button-rgb-active-color: green\n\n      - icon: mdi:power\n```\n\n**User-defined Presets**\n\nPresets can be defined in the top level of your dashboard, using the \"Raw configuration editor\" mode.\n\n```yaml\npaper_buttons_row:\n  presets:\n    my_custom_preset:\n      ripple: fill\n      styles:\n        button:\n          color: red\n\nviews: ...\n```\n\n### Style Options\n\n| Name   | Type     | Requirement  | Description                                            |\n| ------ | -------- | ------------ | ------------------------------------------------------ |\n| button | `object` | **Optional** | CSS styles to apply to the button.                     |\n| icon   | `object` | **Optional** | CSS styles to apply to specifically the icon.          |\n| name   | `object` | **Optional** | CSS styles to apply to specifically the name field.    |\n| state  | `object` | **Optional** | CSS styles to apply to specifically the state field.   |\n| ripple | `object` | **Optional** | CSS styles to apply to specifically the ripple effect. |\n\nEach key can be templated e.g.\n\n```yaml\nstyles:\n  button:\n    color: \u003e-\n      {% if is_state('light.bedroom', 'on') %}\n        red\n      {% else%}\n        cyan\n      {% endif %}\n```\n\n### CSS Variables\n\n**Base State**\n\n- `--pbs-button-color` – used to override the color of the button.\n- `--pbs-button-rgb-color` – same as above but expects a list of rgb values, e.g. `123, 123, 0`.\n- `--pbs-button-rgb-state-color` – this is set automatically to reference an `--rgb-state-*-color` variable.\n- `--pbs-button-rgb-default-color` - this is used to set the default color of the paper-buttons, it is not set by default.\n- `--rgb-state-default-color` – this is the default color provided by Home Assistant.\n\n**Base State (Background)**\n\n- `--pbs-button-bg-color` – used to override the background of the button default is not set.\n- `--pbs-button-rgb-bg-color` – same as above but expects a list of rgb values, e.g. `123, 123, 0`.\n- `--pbs-button-rgb-bg-opacity` – defaults to 1.\n\n**Active State**\n\n- `--paper-item-icon-active-color` – (deprecated) unset in 2022.12 was originally set to `#fdd835`.\n- `--pbs-button-active-color`\n- `--pbs-button-rgb-active-color`\n- `--pbs-button-rgb-state-color`\n- `--pbs-button-rgb-default-color`\n- `--rgb-state-default-color`\n\n**Active State (Background)**\n\n- `--pbs-button-bg-active-color`\n- `--pbs-button-rgb-bg-active-color`\n- `--pbs-button-rgb-bg-active-opacity`\n- `--pbs-button-rgb-bg-color`\n- `--pbs-button-rgb-bg-opacity`\n\n**Unavailable State**\n\n- `--pbs-button-unavailable-color`\n- `--pbs-button-rgb-unavailable-color`\n- `--rgb-disabled-color`\n\n### Extra Styles\n\nThe `extra_styles` option allow you to embed extra CSS into paper-buttons-row this allows you to specify custom animations and style the hover and active states among other things.\n\n**Animations \u0026 Hover/Active Effects**\n\n![example-embedded-hide](examples/example-animation-hover-active.gif)\n\nThere are two built-in animations `blink` and `rotating`.\n\n```yaml\n- type: custom:paper-buttons-row\n  extra_styles: |\n    /* define custom animation */\n    @keyframes bgswap1 {\n      0% {\n        background-image: url(\"/local/christmas-lights-ro.png\");\n      }\n      25% {\n        background-image: url(\"/local/christmas-lights-ro.png\");\n      }\n      50% {\n        background-image: url(\"/local/christmas-lights-gb.png\");\n      }\n      75% {\n        background-image: url(\"/local/christmas-lights-gb.png\");\n      }\n      100% {\n        background-image: url(\"/local/christmas-lights-ro.png\");\n      }\n    }\n    /* set hover and active effects for buttons */\n    paper-button:hover {\n      background-color: red;\n    }\n    paper-button:active {\n      background-color: yellow;\n    }\n    /* styles for the third button only */\n    paper-button:nth-child(3):hover {\n      background-color: green;\n    }\n    paper-button:nth-child(3):active {\n      background-color: purple;\n    }\n  buttons:\n    - icon: mdi:power\n      styles:\n        button:\n          animation: blink 2s ease infinite\n    - styles:\n        button:\n          width: 64px\n          height: 64px\n          background-size: cover\n          # use custom animation defined earlier\n          animation: bgswap1 2s ease infinite\n    - icon: mdi:power\n      styles:\n        button:\n          - animation: rotating 2s ease infinite\n```\n\n#### Data Attributes\n\nIf you use the [`extra_styles`](#extra-styles) option you can use data attributes to style the button based on the domain or state of the configured entity.\n\n- `data-domain` – The domain of the entity\n- `data-state` – The current templated state, which defaults to the entity state but could refer to an attribute if you configure the `state` option\n- `data-entity-state` – The state of the current entity.\n\n```css\npaper-button[data-state=\"on\"] {\n  color: red;\n}\n```\n\n### Global styles \u0026 base config\n\nYou can specify `styles` that apply to the actual flex-box used to contain each row of buttons. You can also specify a default `base_config` that is deep-merged with the config for each button, this helps reduce repetition in your configs.\n\n```yaml\ntype: custom:paper-buttons-row\n# styles applied to the row container\nstyles:\n  # override off/on colors\n  --pbs-button-bg-color: red\n  --pbs-button-bg-active-color: green\n  # align all buttons to the left\n  justify-content: flex-start\nbuttons:\n  - entity: light.bedroom_light\n```\n\n```yaml\ntype: custom:paper-buttons-row\nbase_config:\n  # will be applied to all configured buttons\n  state_styles:\n    \"on\":\n      # override color for the entire button\n      button:\n        color: yellow\n      # or override for the name only\n      name:\n        color: var(--primary-text-color)\n    \"off\":\n      button:\n        color: red\nbuttons:\n  - entity: light.bedroom_light\n  - entity: light.kitchen_light\n```\n\n### Layout\n\nThe pipe or bar `|` symbol is used to put elements next to each other, and an underscore `_` is used to place items below each other.\nYou can also define layouts using a list (row) and nested lists (columns).\n\nThese are some examples of simple layouts:\n\n![example-layout](examples/example-layout.png)\n\n```yaml\ntype: entities\nentities:\n  - type: custom:paper-buttons-row\n    buttons:\n      - entity: light.bedroom_light\n        layout: icon|name\n        # layout: [icon, name]\n\n      - entity: light.bedroom_light\n        layout: icon_name\n        # layout: [[icon, name]]\n\n      - entity: light.bedroom_light\n        layout: name|icon\n        # layout: [name, icon]\n\n      - entity: light.bedroom_light\n        layout: name_icon\n        # layout: [[name, icon]]\n```\n\nAdvanced example\n\n![example-layout-advanced](examples/example-layout-advanced.png)\n\n```yaml\ntype: entities\nentities:\n  - type: custom:paper-buttons-row\n    buttons:\n      - entity: light.bedroom_light\n        layout: icon_name|state\n        # layout: [[icon, name], [state]]\n```\n\n### Templating\n\n#### Template Object\n\n| Name        | Type     | Description                                                                       |\n| ----------- | -------- | --------------------------------------------------------------------------------- |\n| `entity`    | `string` | Optional: entity to extract data from, defaults to the rows configured entity.    |\n| `attribute` | `object` | Optional: extract an attribute from the entity, otherwise the state will be used. |\n| `prefix`    | `string` | Optional: string to append **before** the attribute/state.                        |\n| `postfix`   | `string` | Optional: string to append **after** the attribute/state.                         |\n| `case`      | `string` | Optional: change case of result must be one of `upper`, `lower`, `first`          |\n\n**Examples**\n\n![example-templating](examples/example-templating.png)\n\n```yaml\ntype: entities\nentities:\n  - type: custom:paper-buttons-row\n    buttons:\n      - entity: light.bedroom_light\n        layout: icon|name|state\n        name:\n          attribute: friendly_name\n          postfix: \": \"\n        state:\n          case: first\n```\n\nThe `state_text` and `state_styles` options will use the lowercase result of the template for the state field.\n\n```yaml\ntype: entities\nentities:\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      - entity: fan.bedroom\n        layout: icon|state\n        state:\n          attribute: speed\n        state_styles:\n          high:\n            color: red\n          medium:\n            color: yellow\n          low:\n            color: green\n        state_text:\n          high: III\n          medium: II\n          low: I\n        # ...\n```\n\n#### Jinja Templates\n\n_Note: that Jinja2 templates are slightly slower to load initially due to latency, as they are rendered in the backend, whereas the other are rendered in the frontend._\n\nJinja templates have access to a few special variables. Those are:\n\n- `config` - an object containing the entity row configuration.\n- `entity` - the entity_id from the current entity row configuration. This **must** be used instead of `config.entity` for the template to automatically update.\n- `user` - the username of the currently logged in user.\n- `browser` - the deviceID of the current browser (see [browser_mod](https://github.com/thomasloven/hass-browser_mod)).\n- `hash` - the hash part of the current URL.\n\n**Example**\n\n```yaml\ntype: entities\nentities:\n  - type: custom:paper-buttons-row\n    buttons:\n      - entity: light.bedroom_light\n        layout: icon|name|state\n        name: \"{{ state_attr(config.entity, 'friendly_name') }}: \"\n        state: \"{{ states(config.entity) | title }}\"\n```\n\n## Embedding in other entity rows\n\n![example-minimal-setup](examples/example-embedded.png)\n\nPaper Buttons Row can be embedded within most entity rows. As shown in the image above it inserts a `paper-buttons-row` row inline, this can be either before or after the final element.\n\n```yaml\ntype: entities\nentities:\n  - entity: light.bedroom_light\n    # add the following to a normal entity row to embed paper buttons.\n    extend_paper_buttons_row:\n      position: # can be either `center` or `right`, defaults to `center`.\n      # ... normal paper-buttons-row config goes here.\n```\n\nWhen extending entity rows there are options to control the position of the inserted buttons, as well as to hide the badge or state elements.\n\n![example-embedded-hide](examples/example-embedded-hide.png)\n\n```yaml\ntype: entities\nentities:\n  - entity: input_boolean.test\n  - entity: input_boolean.test\n    name: Hide State\n    extend_paper_buttons_row:\n      hide_state: true\n      buttons:\n        - icon: mdi:power\n  - entity: input_select.test\n  - entity: input_select.test\n    name: Hide Badge\n    extend_paper_buttons_row:\n      hide_badge: true\n      position: right\n      buttons:\n        - icon: mdi:close\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eFull example for the image above\u003c/summary\u003e\n\n```yaml\ntype: entities\nshow_header_toggle: false\nentities:\n  - entity: light.bedroom_light\n    extend_paper_buttons_row:\n      # position defaults to center.\n      buttons:\n        - entity: scene.daylight\n          icon: \"mdi:brightness-5\"\n          name: false\n        - entity: script.light_colour_flow\n          icon: \"mdi:all-inclusive\"\n          name: false\n        - entity: scene.evening\n          icon: \"mdi:brightness-3\"\n          name: false\n          styles:\n            button:\n              margin-right: 8px\n\n  - type: divider\n\n  - entity: media_player.family_room_tv\n    name: TV\n    extend_paper_buttons_row:\n      # position after power button.\n      position: right\n      # use base config to set the default margin for all buttons.\n      base_config:\n        styles:\n          button:\n            margin-left: 2px\n            margin-right: 2px\n      buttons:\n        - icon: \"mdi:volume-mute\"\n          # override left margin for first button.\n          styles:\n            button:\n              margin-left: 0px\n        - icon: \"mdi:volume-minus\"\n        - icon: \"mdi:volume-plus\"\n```\n\n\u003c/details\u003e\n\n## Examples\n\n### Minimal Setup.\n\n![example-minimal-setup](examples/example-3.png)\n\n```yaml\ntype: entities\nentities:\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      - scene.daylight # simplest way to create a button.\n\n      - entity: scene.rave\n        icon: \"mdi:track-light\" # override or add a mdi icon.\n\n      - entity: script.light_colour_flow\n        icon: \"mdi:all-inclusive\"\n        name: false # makes the button icon only.\n\n      - entity: scene.evening\n        icon: \"mdi:brightness-3\"\n        name: false\n```\n\n---\n\n### Using style and state_styles.\n\n![example-styled-toggle-button](examples/example-1.gif)\n![example-styled-toggle-button-top-aligned](examples/example-1-1.gif)\n\n```yaml\ntype: entities\nentities:\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      - entity: light.desk_leds\n        icon: \"mdi:lightbulb\"\n        styles: # These are the default styles that can be overridden by state styles.\n          button:\n            border-radius: 10px\n            font-size: 16px\n        state_styles:\n          \"off\": # define a state then provide a style object.\n            button:\n              background-color: var(--table-row-alternative-background-color)\n            name:\n              color: orange\n          \"on\":\n            button:\n              background-color: var(--primary-color)\n            icon:\n              color: \"#fdd835\" # this will change the icon colour when the entities state is on.\n            ripple:\n              color: orange # colour the ripple effect.\n\n      - entity: light.monitor_leds\n        icon: \"mdi:lightbulb\"\n        layout: icon_name\n        # layout: [[icon, name]]\n        styles:\n          button:\n            background-color: var(--table-row-alternative-background-color)\n            border-radius: 10px\n            font-size: 1.2rem\n            padding: 8px\n          icon:\n            --mdc-icon-size: 40px # make the icon bigger.\n        state_styles:\n          \"on\":\n            button:\n              background-color: var(--primary-color)\n            icon:\n              color: \"#fdd835\"\n            ripple:\n              color: orange\n```\n\n---\n\n### Using state icons, state text and actions.\n\n![example-lock-toggle](examples/example-4.gif)\n\n```yaml\ntype: entities\nentities:\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      - entity: lock.front_door\n        layout: icon|state # show the state field\n        state_icons:\n          \"unlocked\": \"mdi:lock-open\"\n          \"locked\": \"mdi:lock\"\n        state_text:\n          \"unlocked\": \"Unlocked\"\n          \"locked\": \"Locked\"\n\n        state_styles:\n          \"unlocked\":\n            button:\n              color: green\n          \"locked\":\n            button:\n              color: red\n        styles:\n          button:\n            background-color: var(--table-row-alternative-background-color)\n            border-radius: 40px\n            padding: 10px\n            font-size: 1.2rem\n\n        tap_action:\n          action: call-service\n          service: lock.lock\n          service_data:\n            entity_id: lock.front_door\n\n        hold_action:\n          action: call-service\n          service: lock.unlock\n          service_data:\n            entity_id: lock.front_door\n\n          # it's also possible to add a confirmation dialog to the action.\n          confirmation:\n            exemptions:\n              - user: 22a1119b08c54960822a0c6b896bed2\n            text: Are you sure you want to unlock?\n```\n\n---\n\n### Multiple rows of buttons.\n\n![example-multiple-rows-of-buttons](examples/example-2.png)\n\n```yaml\ntype: entities\nentities:\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      - icon: \"mdi:chevron-up\"\n        tap_action:\n          action: call-service\n          service: esphome.family_room_node_transmit_panasonic\n          service_data:\n            command: 218145196\n\n  # for multiple rows define multiple `paper-buttons-row`s.\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      - icon: \"mdi:chevron-left\"\n        tap_action:\n          action: call-service\n          service: esphome.family_room_node_transmit_panasonic\n          service_data:\n            command: 218161644\n      - icon: \"mdi:checkbox-blank-circle-outline\"\n      - icon: \"mdi:chevron-right\"\n        tap_action:\n          action: call-service\n          service: esphome.family_room_node_transmit_panasonic\n          service_data:\n            command: 218108188\n\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      - icon: \"mdi:chevron-down\"\n        tap_action:\n          action: call-service\n          service: esphome.family_room_node_transmit_panasonic\n          service_data:\n            command: 218128748\n```\n\n```yaml\ntype: entities\nentities:\n  - type: \"custom:paper-buttons-row\"\n    buttons:\n      # multiple rows of buttons can also be defined in one paper-buttons-row\n      # by using a list of lists of buttons.\n      - - light.monitor_leds\n        - light.desk_leds\n\n      - - light.bedroom_light\n        - entity: light.bedroom_underglow\n          icon: \"mdi:lightbulb\"\n```\n\n## Installation\n\n```yaml\nresources:\n  - url: /hacsfiles/lovelace-paper-buttons-row/paper-buttons-row.js\n    type: module\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcwillox%2Flovelace-paper-buttons-row","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcwillox%2Flovelace-paper-buttons-row","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcwillox%2Flovelace-paper-buttons-row/lists"}