Creating a bordered button group in SwiftUI

Jun 1, 2023 · Follow on Twitter and Mastodon swiftui

Just like how SwiftUI buttons can use a .bordered button style, you can use ControlGroup to group several buttons together in a bordered group.

As an example, consider this rich text control panel, where the bottom row has two buttons to affect the text indentation level, as well as a segmented picker to change text alignment:

Toolbar with indentation buttons

The buttons use a .bordered style, which makes them not as tall as the picker. I think it would be nicer if the buttons and picker aligned better, and to group the buttons together.

To fix this, you can wrap the buttons in a ControlGroup to make them look just like the segmented text alignment picker:

ControlGroup {
    Button("1") {}
    Button("2") {}

Since the control group is greedy, it will take up as much horizontal space as it can. If you don’t want this greedy behavior, you can just add a frame(width:) to the group.

We can now group the indentation buttons together, to align with the segmented picker:

Toolbar with a segmented indentation button group

If we want to take this even further, we can also group the style buttons on the second row:

Toolbar with a segmented style toggle group

I think that this grouping much clearer indicates which buttons that belong together.

Discussions & More

Please share any ideas, feedback or comments you may have in the Disqus section below, or by replying to this tweet or this toot

If you found this text interesting, make sure to follow me on Twitter and Mastodon for more content like this, and to be notified when new content is published.

If you like & want to support my work, please consider sponsoring me on GitHub Sponsors.