Make a circular button in SwiftUI for macOS?

Programming
, ,
1

I’m having an issue with a button in SwiftUI on MacOS. I’m trying to create a button with a circular shape, but when I click on it, only the rectangle part is being clicked.

The code I’m using is:

Button(action: {
}){
    ZStack {
        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.blue)
        Text("Press me")
    }
}

This gives me:

Preview

I can only click on the rectangle part. Bonus points if you can point out why the circle is cut off.

2

To make the entire button clickable, you can add a transparent overlay to the circle using the .contentShape() modifier. The modified code will look like this:

Button(action: {
}){
    ZStack {
        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.blue)
            .overlay(
                Circle()
                    .stroke(Color.clear, lineWidth: 20)
                    .contentShape(Circle())
            )
        Text("Press me")
    }
}

This will add a transparent circle overlay that matches the size of the blue circle, making the entire button clickable.

As for the circle being cut off, it’s likely because the text is extending beyond the bounds of the circle. You can adjust the padding or font size to fix this.