SwiftUI Button can't tap on a background

The tappable area of a button is dictated by its content.

The content of a button is any view that we provide as a button's label.

In the following example, the button's content is the Text("Button Content").

Button {
    print("Tap")
} label: {
    // 1
    Text("Button Content")
}
// 2
.foregroundColor(.white)
.padding(.vertical, 20)
.padding(.horizontal, 40)
.background(.pink)
.cornerRadius(8)

1 The tappable area in this case is the Text("Button Content") view.
2 Other modifiers we applied outside a button aren't part of the button.

It might look like a part of a button, but it isn't. We can't trigger the button action by tapping the padding and background.

You can easily support sarunw.com by checking out this sponsor.

Tiny OCR: Extract text from image directly from your mac.

Try it for Free

How to make SwiftUI Button background tappable

To make a background of a button tappable, you need to include it inside a button's label.

By moving all modifiers inside a button's label, they become part of a button, making it count as a tappable area.

Button {
    print("Tap")
} label: {
    Text("Button Content")
        .foregroundColor(.white)
        .padding(.vertical, 20)
        .padding(.horizontal, 40)
        .background(.pink)
        .cornerRadius(8)
}

We move every modifier in a button's label. This makes it possible to activate a button by tapping the background.