How to add padding inside a button on macOS

Putting padding on the Text element inside a button behaves unexpectedly on macOS—and not at all the way it does on iOS.

This code:

Button(action: {}) {
    Text("Button")
        .padding()
}
    .background(Color.accentColor)
    .foregroundColor(.white)
    .cornerRadius(10)

Produces this results:

I need more padding than this, but this shows what is happening. Rather than adding padding around the text, the text is being pushed down and out of view. The button is not increasing at all to accommodate the size of its contents, so it's clipping them. Adding a frame with height gets even weirder.

Has anyone dealt with this? Is there a work around? Thanks!

Answered by Claude31 in 689329022

This issue seems to exist since a long time on SwiftUI for MacOS:

https://stackoverflow.com/questions/58419161/issue-with-buttons-in-swiftui-on-macos

You could file a bug report.

Accepted Answer

This issue seems to exist since a long time on SwiftUI for MacOS:

https://stackoverflow.com/questions/58419161/issue-with-buttons-in-swiftui-on-macos

You could file a bug report.

How to add padding inside a button on macOS
 
 
Q