Left-Aligned Button Icon, Center-Aligned Button Text

Hi all.

I'm trying to create a button where the icon is aligned on the left side of the button and the text is aligned center, like so:


I can sort-of do this by adding in white spaces before and after the text (that's how I generated this image), but then when I run it in the vision client I sometimes get ellipses at the end of the button text, which is no good. My current solution is to try to create 2 buttons -- one for the icon, and one for the text -- and merge them seamlessly, but I don't know how to configure the border so that it appears like one button instead of this:


Even though these buttons do not have a border it still shows one, and I would need a way to hide just the right "border" on the left button, and the left "border" on the right button.

Does anyone know how I can configure these "borders"? Or can anyone propose a better idea for accomplishing my end goal? Thanks!

  • Remove Fill Area
  • Edit border and choose Matte for both buttons.
  • For left one, put 0 for the right's border width
  • For right one, put 0 for the left border's width
    Clipboard 2

Hi automatisation.

Thank you for the reply. I had already tried that except I didn't disable Fill Area. I see that disabling Fill Area does get rid of that background "border". However, I do want to preserve the background color of the buttons.

It also seems like when I'm in run mode I can't click on these buttons that have fill area disabled. Are you experiencing that too?

Having Fill area disabled will remove the "feedback" of when clicking a button, but it will still trigger the actionPerformed you set up.
If you really need a fill area and/or a feedback, you can always have a label or a rectangle behind the button. For the feedback, just change this label or rectangle color and you should be good to go.
But I admit it's a lot to do just for a button

Another way to do it (and much easier) would be to create only one button, with no icon and put an image on top of the button.
Clipboard 1
You might encounter issues with long text going under the image but with some tweaking, it should work

Hi Automatisation.

I wanted to avoid putting the image over the button because the text is not truly "centered" in that example (it will be closer to the image than the right border). But making two buttons with no fill area and then adding a rectangle behind them will probably work precisely how I need it to, I'll give it a try! Thank you!