Toggle chip with mod-card and button-card

Share your Projects! Dashboards & Frontend
,
1

Just wanted to share this little chip/card I’m proud of. Just a mix of mod-card and button-card, not custom JS or anything like that. It’s designed to sit alongside other Mushroom chips in the badges at the top of any dashboard to be a easy toggle.

image
image

  1. Make a input_boolean helper
  2. Make your detail cards conditionally shown based on that helper
  3. Input that helper in the code below in place of input_boolean.show_camera_details

Card yaml

type: custom:mod-card
style: |
  :host {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    align-self: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 0;
    transform: translateY(0);
  }
  ha-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    line-height: 0;
    --ha-card-border-width: 0px;
  }
grid_options:
  columns: 2
  rows: 1
card:
  type: custom:button-card
  entity: input_boolean.show_camera_details
  show_name: false
  show_state: false
  show_icon: false
  tap_action:
    action: toggle
  styles:
    card:
      - width: 108px
      - height: var(--mush-chip-height, 36px)
      - border-radius: calc(var(--mush-chip-height, 36px) / 2)
      - padding: 0
      - margin: 0
      - line-height: 0
      - overflow: hidden
      - background: |
          [[[ return entity.state === 'on'
            ? 'rgba(162, 210, 255, 0.18) !important'
            : 'var(--ha-card-background, var(--card-background-color))'; ]]]
      - position: relative
    custom_fields:
      knob:
        - position: absolute
        - top: 50%
        - left: |
            [[[ return entity.state === 'on'
              ? '77px'
              : '7px'; ]]]
        - transform: translateY(-50%)
        - width: 24px
        - height: 24px
        - border-radius: 50%
        - background: white
        - z-index: 1
      label:
        - position: absolute
        - top: 50%
        - transform: translateY(-50%)
        - left: |
            [[[ return entity.state === 'on' ? '14px' : 'auto'; ]]]
        - right: |
            [[[ return entity.state === 'on' ? 'auto' : '14px'; ]]]
        - text-align: |
            [[[ return entity.state === 'on' ? 'left' : 'right'; ]]]
        - font-size: 13px
        - font-weight: 500
        - line-height: 1
        - color: var(--primary-text-color)
        - opacity: 0.85
        - pointer-events: none
        - white-space: nowrap
        - overflow: hidden
        - max-width: 62px
  custom_fields:
    knob: ""
    label: Details
1 Like
2

I think the mod card has no effect in this case.Butyon card looks exactly the same without it :grinning:

3

Whoops :sweat_smile: ah well, at least it doesnt break it!