[JS+Editor Module] Bubble Quick Launcher

[Clooos]

Bubble Quick Launcher

Version: v1.0.0
Creator: Clooos

Important

Supported cards:

• Sub-buttons only

Turn your "Sub-buttons only" card into a clean and compact launcher grid, perfect for room controls, navigation menus, scenes, and quick actions.

• Flexible launcher layouts using grouped sub-buttons
• Square or regular card layouts
• Circle, rounded, or square buttons
• Optional button labels and highlights
• Customizable spacing, padding, icon sizing...
• And more!

How to use

Create a Sub-buttons only card, open the Sub-buttons editor, set Groups placement to Rows, then organize your sub-buttons into groups. Each group becomes a row in the launcher.

---

Configuration

bubble_quick_launcher:
  card_layout: square
  hide_card_background: false
  hide_button_highlights: false
  hide_button_names: true
  button_shape: circle
  button_gap: 6
  card_padding: 6
  text_space: 28
  icon_size: 46

---

Example

3×3 launcher grid

type: custom:bubble-card
card_type: sub-buttons
sub_button:
  main: []
  bottom:
    - name: Top row
      group:
        - icon: mdi:palette
        - icon: mdi:palette
        - icon: mdi:palette
    - name: Middle row
      group:
        - icon: mdi:palette
        - icon: mdi:palette
        - icon: mdi:palette
    - name: Bottom row
      group:
        - icon: mdi:palette
        - icon: mdi:palette
        - icon: mdi:palette
  bottom_layout: rows
modules:
  - bubble_quick_launcher
bubble_quick_launcher:
  card_layout: square
  hide_card_background: false
  hide_button_highlights: false
  hide_button_names: true
  button_shape: circle
  button_gap: 6
  card_padding: 6
  text_space: 28
  icon_size: 46

---

🧩 Get this Module

If you like this module and want to support my work, you can find it on my Patreon. Bubble Card keeps growing, and your support helps me spend more time adding new features and fixing bugs ❤️

By joining my Patreon, you also get access to all my other exclusive modules!

A big thank you to everyone already supporting me. Your messages and feedback mean a lot and really push me to keep improving Bubble Card and releasing new features for free for the community. Cheers! 🍻

---

How to install

1. Download the module
   Download the YAML file for this module from the bottom of the Patreon post.

   

2. Open your Bubble Card editor
   Go to the card where you want to use the module.

3. Import the module
   In the Modules section of the editor, click on Import from YAML, paste the contents of the downloaded YAML file, then click Import Module.

4. Configure as needed

---

Screenshot:

[Buddinski88]

Nice module @Clooos 👌🏻

One quick question. How can size the card to the same hight as the two cards in the left stack?

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        sub_button:
          main:
            - name: Group 1
              buttons_layout: inline
              group:
                - entity: switch.wz_sds7_wohnzimmer_steckdose_staubsauger
          bottom: []
        entity: vacuum.alfred
        show_last_changed: false
        show_last_updated: false
        show_attribute: false
        modules:
          - animated_icon
          - bubble_neon
          - smart_icons
        animated_icon:
          mode: vacuum
          ignore_state: false
          no_off_icon: false
        card_layout: normal
        tap_action:
          action: navigate
          navigation_path: "#vacuum"
        button_action:
          tap_action:
            action: more-info
        smart_icons:
          icons:
            - name: Steckdose
              target: button_1
              icon_map:
                "on": mdi:power-plug
                "off": mdi:power-plug-off
              entity: switch.wz_sds7_wohnzimmer_steckdose_staubsauger
      - type: custom:bubble-card
        card_type: select
        button_type: switch
        sub_button:
          main: []
          bottom: []
        entity: input_select.rollladen_szene
        name: Rollladen
        grid_options:
          columns: 6
          rows: auto
        modules:
          - bubble_neon
          - custom_select
        card_layout: normal
        custom_select:
          main_card:
            - icon: mdi:window-shutter-open
              name: Tag
              action:
                - action: scene.turn_on
                  target:
                    entity_id: scene.rollladen_tag
            - name: Abend
              icon: mdi:window-shutter-alert
              action:
                - action: scene.turn_on
                  target:
                    entity_id: scene.rollladen_abend
            - name: Nacht
              icon: mdi:window-shutter
              action:
                - action: scene.turn_on
                  target:
                    entity_id: scene.rollladen_nacht
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: sub-buttons
        sub_button:
          main: []
          bottom:
            - name: Top row
              group:
                - icon: ""
                  entity: switch.wz_sds10_wohnzimmer_steckdose_tv
                  show_state: true
                  name: TV
                  show_name: false
                - icon: ""
                  name: Steckdose Nachttisch
                  entity: switch.sz_sds5_schlafzimmer_steckdose_nachttisch
            - name: Middle row
              group:
                - icon: ""
                  entity: switch.homematic_raspi_sv_dunstabzug_steuerung
                  name: Dunstabzug Steuerung
          bottom_layout: rows
        modules:
          - bubble_quick_launcher
        bubble_quick_launcher:
          card_layout: square
          hide_card_background: false
          hide_button_highlights: false
          hide_button_names: true
          button_shape: circle
          button_gap: 6
          card_padding: 6
          text_space: 28
          icon_size: 68
        card_layout: large

[Clooos]

Hi! That kind of layout is a bit complex, especially when combining square and regular cards. The problem is when the page is resized, the square card is adjusting both vertically and horizontally.

The solution is probably to add the two cards on the left inside a square grid, then defining the height of both cards with custom styles, setting it to 50% should works, but this is maybe more complex than that and will change how the two cards looks.

[Buddinski88]

Hi! That kind of layout is a bit complex, especially when combining square and regular cards. The problem is when the page is resized, the square card is adjusting both vertically and horizontally.

The solution is probably to add the two cards on the left inside a square grid, then defining the height of both cards with custom styles, setting it to 50% should works, but this is maybe more complex than that and will change how the two cards looks.

Too bad - I thought it would be easier. Thanks for the quick response. I just tried to figure it out, but it does not seem to be working.

[kelbertpaul]

Hi Clooos ! A very good module again. I just have a question, can I reduce the top and bottom gaps on the card ? I'll add some other button in the future but right now it's not the case and the card takes a big part of my dashboard

[Clooos]

Hi! You can change the rows of the card (and don't select the square layout for this one). This should do what you want 🙂

[kelbertpaul]

That's perfect! Thank you very much

[ansky26]

Hi, Clooos! This looks fantastic and I tried it right away. I want to build a single row launcher with 4 buttons. The problem I am having is that if I choose "Regular Card" in the Launcher card layout, the sub-buttons are really, really tiny and don't even get colored correctly; if I choose "Square Card", the buttons look good but the single row is centered in a huge wasted space. I think using the "Regular Card" is the right way to go, but I can't figure out why the buttons don't display correctly. They look fine on the normal sub-button card but get messed up as soon as I add the launcher module to the card. Any ideas?

[Clooos]

Hi! Indeed I've put the priority on the square layout and forgot a bit about the regular one. But changing the row value should fix this, have you tried with rows: 2?

[ansky26]

I had been trying to force it with rows: 1, but I hadn't tried other values. Setting rows: 2 definitely makes the sub-buttons work. It's still a bit taller than what I would ideally like, but much better than square and definitely works for now. Thanks for the quick reply!

[Clooos]

You're welcome!