How to specify or change the clickable area of a button SwiftUI

Question

I am just getting into the world of SwiftUI, so I don't know if there is a very obvious answer to this question, but basically I have created a button and tried to make the button two concentric circles. However once I run my code on the simulator I found out that I could click literally anywhere on the screen and the button would be "pressed" (I tested it using a print statement). I want to confine the clickable area of the button to the just the area of the circles or maybe the square that bounds both circles.

Here is my code:

    Button(action: {
    print("Do Something")

}) {
    
    Circle().stroke(Color.white, lineWidth: 3)
        .frame(width: 65, height: 65)
        .position(x: x, y: y)
        .overlay(
            Circle().stroke(Color.white, lineWidth: 3)
                .frame(width: 55, height: 55)
                .position(x: x, y: y)
    )

}

This is what it looks like when I click on it in my live preview window:

Answer 1

Here is another implementation for two concentric circles which to me looks a little better.

      //Red Button Elements
            ZStack(alignment: .center){
                VStack {
                    Spacer()          // << pushes button down
                    Button(action: {
                        print("Press Circle")
                        
                    }) {
                        
                        Circle().stroke(Color.white, lineWidth: 40)
                            .frame(width: 200, height: 200)
                            .overlay(
                                Circle().stroke(Color.red, lineWidth: 100)
                                    .frame(width: 100, height: 100)
                            )
                            .foregroundColor(/*@START_MENU_TOKEN@*/.red/*@END_MENU_TOKEN@*/).padding(.bottom, 100.0)
                        
                    }
                }
                
            }
            .padding(.all)

Answer 2

You should remove .position modifier, because it switches view location (in your case button content) into global coordinates.

Instead use layout by stack, like below

    VStack {
        Spacer()          // << pushes button down
        Button(action: {
            print("Do Something")

        }) {

            Circle().stroke(Color.white, lineWidth: 3)
                .frame(width: 65, height: 65)
                .overlay(
                    Circle().stroke(Color.white, lineWidth: 3)
                        .frame(width: 55, height: 55)
                )

        }
    }