Button with custom content

corporal15 · August 3, 2026, 11:36am

Godot Version

v4.7.1.stable.mono.official [a13da4feb]

Question

I want to create a Button with this style of content:

| column 1 | column 2 | column 3 | column 4 |
| texture  | label    | texture  | label    |

From my experience, it’s directly impossible - Button extends Control, so if you add anything inside, it will never display properly.

I wanted to ask what is the most reasonable approach to solving it. Because it seems there are many ways, including making entirely new control type, but perhaps there is easy and straightforward way of doing it. You can get the same results using PanelContainer and HBoxContainer in less than a minute, but of course it’s not going to be clickable.

japonbaligi · August 3, 2026, 12:19pm

keep a real Button, clear its text/icon, and put an HBoxContainer inside it.

Button
└─ HBoxContainer
   ├─ TextureRect
   ├─ Label
   ├─ TextureRect
   └─ Label

If layout fights, do the PanelContainer version and make it clickable:

PanelContainer + HBoxContainer for the look
either put a full-rect flat Button behind/over it (mouse_filter set so clicks hit the button), or extend BaseButton and build the same content as children

Don’t need a whole new Control type for this.

corporal15 · August 3, 2026, 4:24pm

I don’t know how much it affects this, but I have a set of such buttons in VBoxContainer. It basically displays a list of 1 pixel height Buttons, and content of the Button is outside below it. Contents of the Buttons are also on top of each other. Basically what I’ve said - Button is not Container, so it goes completely bonkers and doesn’t know how to display.

PanelContainer approach might work, but is it possible to have all custom states for it like for Button? I mean normal/hover/focused etc.

After some testing I’ve realized that for my use case 4 columns is too much (doesn’t look that good), so I had to cut 2 columns. And that means I can just use Icon and Text without building custom columns. But if someone knows how to do it right I will be sure to mark it as solution.

gertkeno · August 3, 2026, 5:44pm

I believe there should be a ButtonContainer node in the future, for now using MarginContainer to enforce same-sized control nodes is a pretty common work around

github.com/godotengine/godot-proposals

Add a PanelContainerButton or PanelButton node

opened 03:49PM - 25 Dec 25 UTC

MatthiasBae

topic:gui

### Describe the project you are working on Working on a nutrition planning app… so it is just user interface ### Describe the problem or limitation you are having in your project I am working on clickable tiles / panels which can contain other nodes or multiple node As example (picture taken from the App Yazio). The Meals "Breakfast", "lunch" etc. are clickable and change the Style when beeing pressed / hovered like the Button Node. <img width="471" height="1000" alt="Image" src="https://github.com/user-attachments/assets/4b51dfaf-9fb0-4e81-917b-8c033fde0648" /> The "problem" is that you can use the Button Node as Background but it does not update its size to its children size. To solve this you have to set a minimum size of the button and change the childs anchor mode to full rect so it updates its size to the Button size. ### Describe the feature / enhancement and how it helps to overcome the problem or limitation Add a new Node which updates its size like a PanelContainer but also updates its style when different events like "Pressed", "Hovered" etc. beeing emitted (like the Button Node). https://github.com/user-attachments/assets/c001a0e2-5b75-48ec-9acd-1a0d452440ca ### Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams In the end it is the same functionality like the Button Node but completely empty without text or icon you can set. It is just a PanelContainer with Button functionality. ### If this enhancement will not be used often, can it be worked around with a few lines of script? You can use the default Button Node but it does not feel correct because it does not update its size to its children. Instead you have to set a minimum size and let the children fit to its parent width. ### Is there a reason why this should be core and not an add-on in the asset library? It is a different button especially used for a lot of user interface heavy applications.

japonbaligi · August 3, 2026, 9:34pm

Yup, Button won’t size to its children, so in a Vbox you get that 1px tall mess. That’s expected. For custom content + real button stales, don’t fake it with a plain PanelContainer. Use BaseButton ,or a Button with empty text, as the root and put the HBox inside. Hover/pressed/focus still come from the button theme styles

Set a custom_minimum_size on the button or make the Hbox drive it via min sizes on the kids, so the VBox gets a real height. Since you cut it down to icon + text tho, the built-in Button icon/text is the right choice for me, no custom layout needed tho