[Styling Module] Sub-buttons below

[MrBearPresident]

Sub-buttons below

Version: v2025.10.01
Creator: MrBearPresident

Important

Supported cards:

• Button
• Calendar
• Climate
• Cover
• Media Player
• Select
• Separator

This module adds all the necessary css to move the subbuttons below and make full use of the witdh. In meantime give the main feature and title the room to use that witdh. Only applicable when multirow sections are used.
Configure this module via the editor or in YAML, for example:

  type: custom:bubble-card
  card_type: button
  modules:
    - subbutton_below
  card_layout: large-sub-buttons-grid
  grid_options:
    rows: 3
  sub_button:
    - entity: sun.sun
      icon: mdi:numeric-0
    - entity: sun.sun
      icon: mdi:numeric-1
    - entity: sun.sun
      icon: mdi:numeric-2
    - entity: sun.sun
      icon: mdi:numeric-3
  button_type: state
  entity: sun.sun

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

subbutton_below:
    name: "Sub-button below"
    version: "v2025.10.01"
    creator: "MrBearPresident"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1291"

    supported:
        - button
        - calendar
        - climate
        - cover
        - media-player
        - select
        - separator

    description: |
        This module adds all the necessary css to move the subbuttons below and make full use of the witdh. In meantime give the main feature and title the room to use that witdh. Only applicable when multirow sections are used.
        <br><br>
        <code-block><pre>
        subbutton_below: 
            # Your configuration here
        </pre></code-block>

    code: |
        :host{
          --row-size-copy: var(--row-size,1);
        }
        
        .bubble-button-container{
          --row-size-copy: var(--row-size,1);
        }
        
        .large .bubble-wrapper {
          position: relative;
          display: grid;
          grid-template-areas:
          'i n a' 'b b b' !important;
          grid-template-columns: auto 1fr auto;
          grid-template-rows: var(--row-height,56px) 1fr;
          justify-self: start;
          justify-items: start;
          align-self: center;
          align-items: center;
          width: 100%;
          gap: 0px;
        }
        .large .bubble-content-container {
          justify-content: flex-start;
          grid-area: n;
          overflow: hidden;
          max-width: calc(100% - 2 * var(--gap-to-edge,7px));
        }
        .large .bubble-sub-button-container {
          --row-size: calc( var(--row-size-copy) - 1);
          max-width: calc(100% - 20px);
          max-height: calc(100% - 20px);
          grid-area: b;
          justify-self: center;
          align-self: center;
          justify-content: center;
          align-content: start;
          justify-items: center;
          margin: 0;
          left: 0;
          right: 0;
        }
        .large .bubble-buttons-container{
          grid-area: a;
        }

---

Screenshot:

[MrBearPresident]

@HyperCriSiS & @ddkedr: Here you go.

[HyperCriSiS]

Would it also be possible to additionally still use the first line? 😅
Especially for the the normal slider card, to really get use of the whole space.
Makes much difference on mobile view.

[MrBearPresident]

not easily....
I use the css grid to easily separate the items and give them a position.
So in short the card is build like this:

To use also the top would mean a grid design like this:

But this is not possible.

So that would mean in a redesign of this module and for the sub-buttons as well.
Because these are also ordered in grid structure.

[HyperCriSiS]

Thank you for the explanation!
Regarding the button and slider card, I thought they have no card specific feature area or is the card specific are normally the sub-button area? Without the module...

[MrBearPresident]

Indeed, the button and slider don't have a card-specific feature so that space would be empty but because the width of that space is defined on auto it goes to '0' when there is nothing in it.

[HyperCriSiS]

OK thanks 👍 maybe it can be realised in a future version

[ddkedr]

@MrBearPresident thanks a ton, man! That's exactly what I was looking for.

Just to clarity, am I correct that there is no easy way to put a state in a separate grid-area?
I'm thinking about experimenting with this layout:

ICON | NAME | STATE | ACTION
-----------------------------
SUB-BUTTONS

I feel that with this layout we'll use the empty space between name/state and feature action more effectively.
Of course this will only make sense for longer buttons that use 100% of screen width. For half-width cards your current layout with state under the name is more effective.
What do you think?

[HenryJIII]

Is it possible to adjust the container height of the sub-buttons, so those would be bigger? I feel like there is some unsused space between the name/state and the sub-buttons, that could be filled by making the sub-buttons bigger. Both in large and large with 2 rows mode.

[HyperCriSiS]

Also it would be cool if it could be used with normal layout instead of large.

[Clooos]

I have maybe something else in mind, but I always put usability first (and I hope everything is clear), that's why everything is editable in the editor.

For your drag and drop idea, what use case do you have in mind?

[HyperCriSiS]

I have no idea if this is even possible with a card addon or would have need a change in HA.
My idea is that there is no specific layout, only templates.
You create a raster card, with a certain size and x.y rasters.
Then you have an item editor where you can select from different buttons, style elements or whatever and you drop them into the raster and configure them there.
Or you just create placeholders directly in the raster, when you click on them a menu opens where you can select what it should be.
You could define virtual areas within the raster. Drop custom JS code onto it. Apply custom CSS Styles. Or you can add some kind of module, like you have it now. People could create whole Dashboard templates. You could realize automatic resizing to different screen sizes.

Also maybe as plugin system. I like software with plugins very much. It is an elegant way to keep things modular and exchangeable, easily extendible, and accessible. Anyone can contribute without the need of pull requests. I even would only make the real core functions non plugin.
That makes it much easier to adapt to whatever comes.
You exchange the plugin, bam, done.

Of course that would need a PC or at least a tablet for proper configuration experience, but it is not much different now.
Configuring HA on mobile phone is a pain in the ass.

Sure, this would be a mammoth project in the beginning, but I could imagine that in the long run it is better.

This was just a quick'n dirty brainstorm. 😅

[Clooos]

That's a lot more complex explained like that 🫠

[HyperCriSiS]

@Clooos
Do you think you can make it possible to use full space with sub-buttons?
To span them from first line over second below the main icon?
This would be interesting especially for section view on mobile to have no space left as blank unused space.

[Clooos]

This will come at some point 🙂 This is probably already possible with some custom styles.

[Clooos]

I updated his module to fully support v3.0.0. He wanted to update it himself, but I have no news from him anymore. I hope he's doing well.

I will not update everyone's modules (🫠), I just used his module as a test when I worked on the new structure, and updated it in the meantime.

[a-bianucci]

Where do you update the module at? Checking, depsite having bubble-card installed, I'm not seeing a www/bubble that contains the file mentioned

[Clooos]

Hi! The module feature is from v3.0.0-beta, this version is really stable and should be the last beta, I'm just waiting a bit before the stable release just to be sure 🙂

[Christinxa]

Hi, on desktop the card looks great, but in the Android app everything is shifted up (main icon, title, sub-buttons get cut off). Any ideas why?
Using bubble card beta v3.0.0-beta.5, btw. Thanks! 😊
Desktop: Mobile:

Edit: Seems to be related to Android WebView? Switching to Canary 138.0.7164.0 fixed it, but reverting to the stable version brings the issue right back.

[gboldt]

Seems like they fixed a positioning bug within the rendering engine. Or it was a bug and they fixed it? I got it first on my phone, then updated my browser and the same issue appeared there. The code just needs a little update, @MrBearPresident just add the position: relative; attribute at the wrapper selector.

subbutton_below:
    name: Sub-button below
    version: "v2025.04.0"
    creator: "MrBearPresident"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1291"
    description: This module adds all the necessary css to move the subbuttons below and make full use of the witdh. In meantime give the main feature and title the room to use that witdh. Only applicable when multirow sections are used. 
    unsupported:
      - horizontal-buttons-stack
      - pop-up
      - empty-column
  code: |
    :host{
      --row-size-copy: var(--row-size,1);
    }

    .large .bubble-wrapper {
      position: relative; /* UPDATE HERE*/
      display: grid;
      grid-template-areas:
      'i n a' 'b b b' !important;
      grid-template-columns: auto 1fr auto;
      grid-template-rows: var(--row-height,56px) 1fr;
      justify-self: start;
      justify-items: start;
      align-self: center;
      align-items: center;
      width: 100%;
      gap: 0px;
    }
    .large .bubble-content-container {
      justify-content: flex-start;
      grid-area: n;
      overflow: hidden;
      max-width: calc(100% - 2 * var(--gap-to-edge,7px));
    }
    .large .bubble-sub-button-container {
      --row-size: calc( var(--row-size-copy) - 1);
      max-width: calc(100% - 20px);
      max-height: calc(100% - 20px);
      grid-area: b;
      justify-self: center;
      align-self: center;
      justify-content: center;
      align-content: start;
      justify-items: center;
      margin: 0;
      left: 0;
      right: 0;
    }
    .large .bubble-buttons-container{
      grid-area: a;
    }

This fixed it for me, thank you very much

[Clooos]

@berrywhite96 I've updated his module with your YAML, since we have no news from him anymore. Thank you for your help!

[berrywhite96]

@berrywhite96 I've updated his module with your YAML, since we have no news from him anymore. Thank you for your help!

No problem at all. I updated the YAML code again which fixes the broken scrolling of too long text next to icon.

I really like the modules system, thinking of building my own module also related to sub buttons. I think there are a lot of possibilities regarding multiple rows and positioning of those buttons.

[Clooos]

Great! Would be nice to have the same option as this module in yours as well, since this one isn't maintained anymore.

Can't wait to see what you will create 😄

[berrywhite96]

Great! Would be nice to have the same option as this module in yours as well, since this one isn't maintained anymore.

Can't wait to see what you will create 😄

I will try to create something useful when I find the time 😁

[einfall]

Hello,
I use the lastest beta.
How can i setup 2 or more rows?
THX

[idominiki]

I would also like to know if it is possible to display sub-buttons in two rows.

[AllanonBrooks]

Had the same issue. Fixed by adjusting the layout of the card itself.

[Velo1901]

Is there a way to remove the icons inside the pictures?

[einfall]

disable icon? how you set the speaker in the right corner on top? which module?

[Velo1901]

Disable the icon also removed the image. The right speaker is the volume option of the media player settings.

[Velo1901]

disable icon? how you set the speaker in the right corner on top? which module?

I think you're right, but every time I clicked on 'Show Icon' it removed the picture also. But after I try again it removed the icon of the first button, but removing the second icon gives me the same problem of removing the picture.

[Velo1901]

It getting stranger. If I first choose the button and click on visibility and start with entitiestatus and delete the if then etc. Go back to icon and click on not to show icon it removes the icon. I use version 3 beta 5, maybe it's the beta or safari on my MacBook. Happy with the layout. Thanks Mr. BearPresident

[Soukyuu]

@Velo1901: how do you choose which image to display? Separate entity?

[tclayson]

Hello! This is great, thank you so much.

I was wondering if there was any way to get the buttons to stretch to fill the width of the button at all? A bit like the Mushroom Media Player card works (see pic below).

I would be happy if all the buttons just stretched equally to fill the width. I can't figure it out myself!

Thanks!

[HafizSarkawi]

Screen.Recording.2025-07-07.141254.mp4

Hi, need some help. Why is my card showing like this? The whole content seemed to be shifted to the top outside of the card.
Appreciate your help.

type: custom:bubble-card
card_type: button
button_type: switch
name: Office
entity: light.gaming_room
icon: mdi:desk
tap_action:
  action: none
button_action:
  tap_action:
    action: navigate
    navigation_path: /bubble-office
card_layout: large-sub-buttons-grid
rows: "2"
grid_options:
  columns: 6
  rows: "2"
sub_button:
  - entity: light.gaming_room
    icon: mdi:lightbulb
    state_background: true
    show_background: true
  - entity: binary_sensor.office_door
    show_background: true
    state_background: false
  - entity: media_player.office_display
    state_background: false
    visibility:
      - condition: state
        entity: media_player.office_display
        state_not: "off"
    show_state: false
    show_name: false
    show_background: true
  - entity: binary_sensor.office_motion_iaszone
    state_background: false
    visibility:
      - condition: state
        entity: binary_sensor.office_motion_iaszone
        state: "on"
  - entity: binary_sensor.game_room_ac_sensor_ias_zone
    icon: mdi:air-conditioner
    state_background: true
    visibility:
      - condition: state
        entity: climate.game_room_ac
        state: cool
  - entity: fan.office_fan
    icon: mdi:ceiling-fan
    state_background: false
    visibility:
      - condition: state
        entity: fan.office_fan
        state: "on"
modules:
  - subbutton_below
  - "!default"

[Clooos]

Hi, just refresh the Module Store, then install this module's update.

[burnt-past]

This doesn't seem to work with casting to a Google Home Hub.

[Soukyuu]

Something broke with 3.0.0 for me. I tried refreshing the module store, and it displays the version of the module as 2025.07. I then click "install" and get a "successfully installed" message. Attempting to enable the module for a media player card makes the module disappear. If I edit the module before enabling it, it looks weird:

[Soukyuu]

Nice, refreshing the module store now says "no modules found".

[crypticSlave]

I'm having the same problem. My whole dashboard is ruined as it relied on this module for the layout.

[MrBearPresident]

If you installed/updated this through the Module store a weird bug appeared.
I've made a new update and it should work fine now

[Soukyuu]

Working for me now, thanks!

[systems-monitor]

When I load in the new Module Store this is being stepped on by #1315
It is loading that one instead, assumedly because of identical names uniqueness.

[azilberbaum]

Not working for me?

[systems-monitor]

Multiline sub buttons do not seem to be working as the pics in the doc above shows.
Does it work for anyone else? is it something theme or browser?

clipped buttons right and left

I stripped it down to the simple demo yaml and still have the same.

type: custom:bubble-card
card_type: button
modules:
  - subbutton_below
card_layout: large
grid_options:
  rows: 3
sub_button:
  - entity: sun.sun
    icon: mdi:numeric-0
  - entity: sun.sun
    icon: mdi:numeric-1
  - entity: sun.sun
    icon: mdi:numeric-2
  - entity: sun.sun
    icon: mdi:numeric-4
  - entity: sun.sun
    icon: mdi:numeric-3
  - entity: sun.sun
    icon: mdi:account
  - entity: sun.sun
    icon: mdi:air-conditioner
  - entity: sun.sun
    icon: mdi:battery
  - entity: sun.sun
    icon: mdi:air-purifier
  - entity: sun.sun
    icon: mdi:balcony
button_type: state
entity: sun.sun

[MrBearPresident]

Please use:

card_layout: large-sub-buttons-grid

[firmlyundecided]

I'm having the same issue, and confirmed that I have the large-sub-buttons-grid enabled. The entire card is horizontal scrollable, but clipped.

type: custom:bubble-card
card_type: button
button_type: name
entity: vacuum.q5_max_2
name: Vacuum
modules:
  - subbutton_below
card_layout: large-sub-buttons-grid
rows: 3
sub_button:
  - entity: vacuum.q5_max_2
    name: All Rooms
    show_state: false
    show_name: true
    tap_action:
      action: perform-action
      perform_action: vacuum.send_command
      target:
        device_id: fbf52cc7394a91421dbc3f7ee209bd13
      data:
        command: app_segment_clean
        params:
          segments:
            - 16
            - 17
            - 18
            - 19
            - 20
            - 21
            - 22
            - 23
    show_icon: true
    icon: mdi:home
  - entity: vacuum.q5_max_2
    name: Living Room
    show_name: true
    tap_action:
      action: perform-action
      perform_action: vacuum.send_command
      target:
        device_id: fbf52cc7394a91421dbc3f7ee209bd13
      data:
        command: app_segment_clean
        params:
          segments:
            - 22
    show_icon: true
    icon: mdi:sofa
  - entity: vacuum.q5_max_2
    name: Dining Room
    show_name: true
    tap_action:
      action: perform-action
      perform_action: vacuum.send_command
      target:
        device_id: fbf52cc7394a91421dbc3f7ee209bd13
      data:
        command: app_segment_clean
        params:
          segments:
            - 23
    show_icon: true
    icon: mdi:table-furniture
  - entity: vacuum.q5_max_2
    name: Kitchen
    show_name: true
    tap_action:
      action: perform-action
      perform_action: vacuum.send_command
      target:
        device_id: fbf52cc7394a91421dbc3f7ee209bd13
      data:
        command: app_segment_clean
        params:
          segments:
            - 21
    show_icon: true
    icon: mdi:silverware-fork-knife
  - entity: vacuum.q5_max_2
    name: Bedroom
    show_name: true
    tap_action:
      action: perform-action
      perform_action: vacuum.send_command
      target:
        device_id: fbf52cc7394a91421dbc3f7ee209bd13
      data:
        command: app_segment_clean
        params:
          segments:
            - 16
            - 17
    show_icon: true
    icon: mdi:bed-double
  - entity: vacuum.q5_max_2
    name: Second Bathroom
    show_name: true
    tap_action:
      action: perform-action
      perform_action: vacuum.send_command
      target:
        device_id: fbf52cc7394a91421dbc3f7ee209bd13
      data:
        command: app_segment_clean
        params:
          segments:
            - 19
    show_icon: true
    icon: mdi:paper-roll
  - entity: vacuum.q5_max_2
    name: Hallway
    show_name: true
    tap_action:
      action: perform-action
      perform_action: vacuum.send_command
      target:
        device_id: fbf52cc7394a91421dbc3f7ee209bd13
      data:
        command: app_segment_clean
        params:
          segments:
            - 18
            - 20
    show_icon: true
    icon: mdi:door-open
show_icon: false
show_name: true
tap_action:
  action: none
button_action:
  tap_action:
    action: none

[firmlyundecided]

I've confirmed that the sample code in the documentation renders as expected in Sections view. The single row is a result of Masonry view. Not sure if anything can be done about this, but would love to use this module if so! Thanks.

[MrBearPresident]

The single row is a result of Masonry view

This helped. Solved this in a new version.