Simple Toggle Switch

Hi all,

I’m looking to just have a simple toggle switch in the ui that has one state on the left and another state on the right with a toggle switch in the middle. Are there any cards that can do this? I’m looking to have a toggle for my coffee maker trigger. So something like this.

Alarm {{ switch entity }} Timer

custom:button-card is highly customizable. Or you a 3 columns grid in another grid.

Ah yea I forgot about the button grid. That will probably do what I want. Thanks!

Ok I’ve been trying to figure it out and it looks like I need the grid and custom fields. I’ve been trying to figure this out on my phone but I’m lost. Does anyone have an example of something simple like this?

In the readme you can find a grid example. And look at the excellent forums topics here and here.

I messed around on an actual computer last night and made some progress. This is what I have for anyone that may need something similar.


type: custom:button-card
entity: input_boolean.coffee_maker_trigger
show_name: false
state:
  - icon: mdi:toggle-switch
    value: 'on'
    color: var(--paper-item-icon-color)
  - icon: mdi:toggle-switch-off
    value: 'off'
size: 50px
styles:
  grid:
    - grid-template-areas: ' "grid1 i grid3" "grid4 grid4 grid4"'
    - border: solid 1px
    - border-color: '#F00'
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr
    - margin-top: '-18px'
    - margin-bottom: '-18px'
  card:
    - border-radius: 0%
    - font-size: 24px
    - color: '#F00'
    - border: solid 1px
    - border-color: '#0F0'
  icon:
    - margin-top: '-35px'
  custom_fields:
    grid1:
      - justify-self: end
      - align-self: start
    grid3:
      - justify-self: start
      - align-self: start
    grid4:
      - background-color: '#FF0000'
      - align-self: center
      - justify-self: center
      - height: 100px
      - width: 100%
custom_fields:
  grid1: Alarm
  grid3: Timer
  grid4: |
    [[[
      return `Alarm<ha-icon
        icon="mdi:server"
        style="width: 10%;  color: white; margin-top: 6%">
        </ha-icon>Timer`
    ]]]

1 Like