Config Templates

General¶

Define your config template in the main lovelace configuration and then use it in your button-card. This will avoid a lot of repetitions! It's basically YAML anchors, but without using YAML anchors and is very useful if you split your config in multiple files.
You can overload any parameter with a new one
You can merge states together by id when using templates. The states you want to merge have to have the same id. This id parameter is new and can be anything (string, number, ...). States without id will be appended to the state array. Styles embedded in a state are merged together as usual. See below for an example.
You can also inherit another template from within a template.
You can inherit multiple templates at once by making it an array. In this case, the templates will be merged together with the current configuration in the order they are defined. This happens recursively.
```
type: custom:button-card
template:
  - template1
  - template2
```

The button templates will be applied in the order they are defined: template2 will be merged with template1 and then the local config will be merged with the result. You can still chain templates together (ie. define template in a button-card template. It will follow the path recursively).

Make sure which type of lovelace dashboard you are using before changing the main lovelace configuration:

managed changes are managed by lovelace ui: add the template configuration to configuration in raw editor
go to your dashboard
click three dots and Edit dashboard button
click three dots again and click Raw configuration editor button
yaml: add template configuration to your ui-lovelace.yaml

button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold

  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'

  my_little_template: [...]

And then you can apply this template, and/or overload it:

type: custom:button-card
template: header_red
name: My Test Header

Merging state by id¶

Example to merge state by id:

button_card_templates:
  sensor:
    styles:
      card:
        - font-size: 16px
        - width: 75px
    tap_action:
      action: more-info
    state:
      - color: orange
        value: 75
        id: my_id

  sensor_humidity:
    template: sensor
    icon: 'mdi:weather-rainy'
    state:
      - color: 'rgb(255,0,0)'
        operator: '>'
        value: 50
      - color: 'rgb(0,0,255)'
        operator: '<'
        value: 25

  sensor_test:
    template: sensor_humidity
    state:
      - color: pink
        id: my_id
        operator: '>'
        value: 75
        styles:
          name:
            - color: '#ff0000'

Used like this:

type: custom:button-card
template: sensor_test
entity: input_number.test
show_entity_picture: true

Will result in this state object for your button (styles, operator and color are overridden for the id: my_id as you can see):

state:
  - color: pink
    operator: '>'
    value: 75
    styles:
      name:
        - color: '#ff0000'
  - color: 'rgb(255,0,0)'
    operator: '>'
    value: 50
  - color: 'rgb(0,0,255)'
    operator: '<'
    value: 25

Variables¶

You can add variables to your templates and overload them in the instance of your button card. This lets you easily work with templates without the need to redefine everything for a small change.

An example below:

button_card_templates:
  variable_test:
    variables:
      var_name: "var_value"
      var_name2: "var_value2"
    name: '[[[ return variables.var_name ]]]'

[...]

- type: custom:button-card
  template: variable_test
  entity: sensor.test
  # name will be "var_value"

- type: custom:button-card
  template: variable_test
  entity: sensor.test
  variables:
    var_name: "My local Value"
 # name will be "My local Value"

Info

Variables are evaluated in their alphabetical order based on their name. That means a variable named b can depend on a variable named a, but variable named a can't depend on a variable named b.

This works:

variables:
  index: 2
  value: '[[[ return variables.index + 2; ]]]'
name: '[[[ return variables.value; ]]]' # (1)!

would return 4

This doesn't work:

variables:
  z_index: 2
  value: '[[[ return variables.z_index + 2; ]]]' # (1)!
name: '[[[ return variables.value; ]]]'

This would fail because z comes after v in the alphabet.