Button Text Card

Custom, "neumorphism" card for Home Assistant with support for templating.

Table of contents

• Installation instructions
• Configuration options
• Examples
• Templating
• Conditional hiding
• License & Contributions

Installation instructions

1. Open HACS
2. Go to Plugins > Search for "Button Text Card"
3. Install it
4. Add to your Lovelace config:

  - url: /hacsfiles/button-text-card/button-text-card.js
    type: module

Configuration options

Examples

Basic card with static title, subtitle and custom icon

type: 'custom:button-text-card'
title: Title
subtitle: Subtitle
icon: 'mdi:lightbulb-outline'

Only title

type: 'custom:button-text-card'
title: Only title
icon: 'mdi:format-title'

Large card

type: 'custom:button-text-card'
title: Large version
subtitle: Ideal for important messages
icon: 'mdi:battery-high'
large: true

Custom background & font colors

type: 'custom:button-text-card'
title: Warning!
subtitle: Draw attention with custom colors
icon: 'mdi:comment-alert'
large: true
font_color: '#fff'
background_color: '#A81419'

Templating

For templating, we do NOT support Jinja2. Instead we opted to use Javascript as templating language (like button-card).

Templating is supported in most fields (see 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.

Templates are enclosed by tripple brackets and can contain any valid Javascript: [[[ return "Hello from Javascript!" ]]]

Example: counting people home

type: 'custom:button-text-card'
icon: >
  [[[
    const count = Object.entries(states).filter(e => e[0].indexOf('person.') === 0 && e[1].state === "home").length;

    if(count === 0){
      return "mdi:home-export-outline";
    }else{
      return "mdi:home-import-outline";
    }
  ]]]
title: |
  [[[
    const count = Object.entries(states).filter(e => e[0].indexOf('person.') === 0 && e[1].state === "home").length;
    return "People home: " + count;
  ]]]
subtitle: Support for templating!

Conditional hiding

You 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, ...).

To do so, write a Javascript template in the hide_condition attribute and return true if the card should be hidden.

Example: Only show card when music is playing

type: 'custom:button-text-card'
title: There is music playing
icon: 'mdi:music-circle'
hide_condition: |
  [[[
    const active_players = Object.entries(states).filter(e => e[0].indexOf('media_player.')===0 && e[1].state === 'playing');
    return active_players.length === 0;
  ]]]

Cool 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.

Example: Only show card when the front door is open

type: 'custom:button-text-card'
large: true
entity: binary_sensor.voordeur
title: Front door open!
background_color: '#A81419'
font_color: '#fff'
icon: 'mdi:door-open'
hide_condition: |
  [[[ return entity.state === "off" ]]]

TODO

• Document tap_action support

License & contributions

See LICENSE

Feel free to suggest improvements, flag issues, open pull requests, ...