How to create consistent toolbar buttons with icons

Question

Desired look

I wish to make a toolbar for my app that will contain some simple buttons, each with a single monochromatic icon. Here is an example of some toolbar buttons similar to I'm trying to achieve, from Mail's compose window:

Notice these buttons have a consistent size, inner padding, padding, and shading. This is a pretty consistent style across macOS, present in Mail, Safari, Finder, etc. This leads me to suspect there's a standardized UI component for creating such buttons.

If I use a segmented control, each button looks correct, with each icon being correctly padded:

Now I would like to add individual buttons that match the style.

Attempt 1

My first attempt was to add a "Push Button" (NSButton) to the toolbar:

This resulted in a wide button that's a bit too short, and not lined up with the segmented control:

Attempt 2

My second attempt was to use a segmented control, with only 1 segment.

This resulted in a button that's the right shape, size, etc., but it was off center relative to its label.

Naturally, I can manually adjust the button to match the goal, but I feel like I'm missing something. What's the proper way to create these standard buttons?

Goltz

Answer 1

This is actually quite easy to do and you were close already. You can use NSButton for that. Note that it has different styles (defined in NSButton.BezelStyle) to choose from. The default one is the one to use inside windows and modals. But for toolbars, to match the style of segmented controls and search bars, you can choose the style .texturedRounded.

You can also set the style via Interface Builder. Note that you have to select the button itself, not the toolbar item around it.

To get the correct size, you seem to set the icon within the toolbar item, not the button itself.

Here is my result:

Govea

I tried that, but it doesn't quite line up, and also the button isn't sized automatically to the icon within it. i.imgur.com/tRLXaQi.png – Goltz

That is strange, I updated my answer. Maybe this fixes it for you. – Govea

Are you sure that sized it automatically? I couldn't replicate the results. And from what I can see, the "Image name" of the NSToolbarItem is shared with the NSButton's "Image" – Goltz

Ah ok, sorry. I misunderstood Xcode's behaviour there. I have measured the width of some buttons in Finder and Mail etc. They have a width of 38, which I have set manually on the toolbarItem. (min and max width are the same). After that I have set the image of the toolbar item and the new size was only then represented by Interface Builder. – Govea

Were you able to fix the height offset? – Govea

Nope, the height is still a little off, just as it is in your screenshot. – Goltz

Yeah, but that is only in Interface Builder. Compile and run, the icons should be lined up properly. Its worthy of a bug report though. – Govea

Would you mind sharing this sample project you made? – Goltz

Well, there is nothing special to it, but I can surely send it around after the Keynote today ;) – Govea

I'm sorry, I totally forgot about this. Here is my sample: github.com/mangerlahn/StackOverflow-ToolbarItem-Test – Govea