{"id":16600581,"url":"https://github.com/savjee/button-text-card","last_synced_at":"2025-10-30T22:13:45.168Z","repository":{"id":37403585,"uuid":"241706284","full_name":"Savjee/button-text-card","owner":"Savjee","description":"Custom, \"neumorphism\" Lovelace card","archived":false,"fork":false,"pushed_at":"2024-12-31T11:33:18.000Z","size":1006,"stargazers_count":125,"open_issues_count":8,"forks_count":6,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T11:05:32.563Z","etag":null,"topics":["home-assistant","lovelace-card","templating","typescript"],"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/Savjee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2020-02-19T19:27:29.000Z","updated_at":"2025-03-15T06:54:47.000Z","dependencies_parsed_at":"2024-06-12T21:02:48.049Z","dependency_job_id":"b0426e11-7a5a-46c3-b731-b85fd42a4697","html_url":"https://github.com/Savjee/button-text-card","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Savjee%2Fbutton-text-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Savjee%2Fbutton-text-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Savjee%2Fbutton-text-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Savjee%2Fbutton-text-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Savjee","download_url":"https://codeload.github.com/Savjee/button-text-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332560,"owners_count":20921853,"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":["home-assistant","lovelace-card","templating","typescript"],"created_at":"2024-10-12T00:14:59.949Z","updated_at":"2025-10-30T22:13:40.121Z","avatar_url":"https://github.com/Savjee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"\" rel=\"noopener\"\u003e\n \u003cimg src=\"https://savjee.github.io/button-text-card/logo.png\" alt=\"Project logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eButton Text Card\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n  [![hacs_badge](https://img.shields.io/badge/HACS-Custom-orange.svg)](https://github.com/custom-components/hacs)\n  [![Build Status](https://github.com/Savjee/button-text-card/workflows/Build/badge.svg)](https://github.com/Savjee/button-text-card/actions?query=workflow%3ABuild)\n  [![GitHub Issues](https://img.shields.io/github/issues/Savjee/button-text-card.svg)](https://github.com/Savjee/button-text-card/issues)\n  [![GitHub Pull Requests](https://img.shields.io/github/issues-pr/Savjee/button-text-card.svg)](https://github.com/Savjee/button-text-card/pulls)\n  [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n\n\u003c/div\u003e\n\n---\n\nCustom, \"neumorphism\" card for Home Assistant with support for templating.\n\n# Table of contents\n* [Installation instructions](#installation-instructions)\n* [Configuration options](#configuration-options)\n* [Examples](#examples)\n* [Templating](#templating)\n* [Conditional hiding](#conditional-hiding)\n* [License \u0026 Contributions](#license--contributions)\n\n---\n\n# Installation instructions\n\n1. Open [HACS](https://hacs.xyz/)\n2. Go to Plugins \u003e Search for \"Button Text Card\"\n4. Install it\n5. Add to your Lovelace config:\n\n```yaml\n  - url: /hacsfiles/button-text-card/button-text-card.js\n    type: module\n```\n\n# Configuration options\n| Name             | Type    | Requirement | Description                                                                 | Default              | Template support? |\n|------------------|---------|-------------|-----------------------------------------------------------------------------|----------------------|-------------------|\n| type             | string  | required    | `custom:button-text-card`                                                   | n/a                  | No                |\n| entity           | string  | optional    | Which entity state you want to use in your card (templating)                |                      | No                |\n| icon             | string  | optional    | Custom icon for the card                                                    | `mdi:alert-circle`   | Yes               |\n| title            | string  | optional    |                                                                             |                      | Yes               |\n| subtitle         | string  | optional    |                                                                             |                      | Yes               |\n| large            | boolean | optional    | Large cards have a full-width container                                     | `false`              | Yes               |\n| font_color       | string  | optional    | CSS colorcode for the text                                                  | Defined by theme     | Yes               |\n| icon_color       | string  | optional    | CSS colorcode or \"auto\" if you want it to change based on your entity state | Defined by theme     | Yes               |\n| icon_size        | number  | optional    | Height of the icon (in pixels)                                              | Defined by HA (24px) | Yes               |\n| background_color | string  | optional    | CSS color for the background of the badge                                   | Defined by theme     | Yes               |\n| hide_condition   | string  | optional    | Javascript template that defines if card should be hidden                   | `false`              | Yes               |\n| icon_animation   | string  | optional    | Possible values: 'spin'                                                     |                      | Yes               |\n\n\n# Examples\n\n**Basic card with static title, subtitle and custom icon**\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-1.png\"\u003e\n\u003c/div\u003e\n\n```yaml\ntype: 'custom:button-text-card'\ntitle: Title\nsubtitle: Subtitle\nicon: 'mdi:lightbulb-outline'\n```\n\n**Only title**\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-2.png\"\u003e\n\u003c/div\u003e\n\n```yaml\ntype: 'custom:button-text-card'\ntitle: Only title\nicon: 'mdi:format-title'\n```\n\n**Large card**\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-4.png\"\u003e\n\u003c/div\u003e\n\n```yaml\ntype: 'custom:button-text-card'\ntitle: Large version\nsubtitle: Ideal for important messages\nicon: 'mdi:battery-high'\nlarge: true\n```\n\n**Custom background \u0026 font colors**\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-5.png\"\u003e\n\u003c/div\u003e\n\n```yaml\ntype: 'custom:button-text-card'\ntitle: Warning!\nsubtitle: Draw attention with custom colors\nicon: 'mdi:comment-alert'\nlarge: true\nfont_color: '#fff'\nbackground_color: '#A81419'\n```\n\n# Templating\n\nFor templating, we do **NOT** support Jinja2. Instead we opted to use Javascript as templating language (like [button-card](https://github.com/custom-cards/button-card)). \n\nTemplating is supported in most fields (see [options](#options) for more details). Since these templates are executed in the front-end, there is no impact on the performance of your Home Assistant installation. It does, however, mean that you have to learn some Javascript.\n\nTemplates are enclosed by tripple brackets and can contain any valid Javascript: `[[[ return \"Hello from Javascript!\" ]]]`\n\n**Example: counting people home**\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-3.png\"\u003e\n\u003c/div\u003e\n\n```yaml\ntype: 'custom:button-text-card'\nicon: \u003e\n  [[[\n    const count = Object.entries(states).filter(e =\u003e e[0].indexOf('person.') === 0 \u0026\u0026 e[1].state === \"home\").length;\n\n    if(count === 0){\n      return \"mdi:home-export-outline\";\n    }else{\n      return \"mdi:home-import-outline\";\n    }\n  ]]]\ntitle: |\n  [[[\n    const count = Object.entries(states).filter(e =\u003e e[0].indexOf('person.') === 0 \u0026\u0026 e[1].state === \"home\").length;\n    return \"People home: \" + count;\n  ]]]\nsubtitle: Support for templating!\n```\n\n# Conditional hiding\nYou can use a Javascript template to dynamically hide a card. This can be useful to create contextual cards (eg: only show when the front door is open, when there are lights on, ...).\n\nTo do so, write a Javascript template in the `hide_condition` attribute and return `true` if the card should be hidden.\n\n\n**Example: Only show card when music is playing**\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-6.png\"\u003e\n\u003c/div\u003e\n\n```yaml\ntype: 'custom:button-text-card'\ntitle: There is music playing\nicon: 'mdi:music-circle'\nhide_condition: |\n  [[[\n    const active_players = Object.entries(states).filter(e =\u003e e[0].indexOf('media_player.')===0 \u0026\u0026 e[1].state === 'playing');\n    return active_players.length === 0;\n  ]]]\n```\n\nCool feature: when you go into edit mode, all hidden cards will appear with an opacity of 50%. That way you can easily manage all your cards.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-6a.png\"\u003e\n\u003c/div\u003e\n\n**Example: Only show card when the front door is open**\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://savjee.github.io/button-text-card/example-7.png\"\u003e\n\u003c/div\u003e\n\n```\ntype: 'custom:button-text-card'\nlarge: true\nentity: binary_sensor.voordeur\ntitle: Front door open!\nbackground_color: '#A81419'\nfont_color: '#fff'\nicon: 'mdi:door-open'\nhide_condition: |\n  [[[ return entity.state === \"off\" ]]]\n```\n\n# TODO\n* Document tap_action support\n\n# License \u0026 contributions\nSee [LICENSE](/LICENSE)\n\nFeel free to suggest improvements, flag issues, open pull requests, ...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsavjee%2Fbutton-text-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsavjee%2Fbutton-text-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsavjee%2Fbutton-text-card/lists"}