Fixing the issue of an unclickable SwiftUI Plain Button when tapping on the empty area
Tags: swiftui, swift, ios15
Published: 2023-09-23 07:24:14

---
title: Fixing the issue of an unclickable SwiftUI Plain Button when tapping on the empty area
published: true
date: 2023-07-29 00:55:11 UTC
tags: SwiftUI,Swift,iOS15
cover_image: https://swift.my.id/content/images/2023/07/Screenshot-2023-07-29-at-08.00.05.jpg
canonical_url: https://swift.my.id/mengatasi-masalah-klik-pada-plain-button-swiftui/
---

If you're using a Button widget in **SwiftUI**, by default, the entire label of the Button is clickable. This is the default tap area for the Button if you use a button style other than **Plain**. For example:

```swift
struct ContentView: View {
    @State private var show = false
    var body: some View {
        Button {
            show.toggle()
        } label: {
            HStack {
                Image(systemName: "plus")
                Text("Add data")
            }
            .padding()
            .frame(maxWidth: .infinity)
        }
        .background {
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(.primary, lineWidth: 0.2)
        }
        .padding()
        .sheet(isPresented: $show){
            Text("Pop Window")
        }
    }
}

```

![Fixing the issue of an unclickable SwiftUI Plain Button when tapping on the empty area](https://swift.my.id/content/images/2023/07/image.png)

The example above is a Button that contains an icon and text, with border modifier to make it appear as an outlined Button. The default style for this button is `automatic`.

And as you can notice, you can click on all parts of the button. Even in the areas that appear empty.

<video src="https://swift.my.id/content/media/2023/07/Screen-Recording-2023-07-29-at-06.53.08-android-phone.mp4" controls="controls">
</video>

However, styles like this are sometimes not what you want, because all parts inside the button will appear as a hyperlink or be colored in blue. Therefore, the button style is usually changed to `.plain`, which makes the color of content inside the button become **default** , and than allows you to customize it as needed.

```swift
struct ContentView: View {
    @State private var show = false
    var body: some View {
        Button {
            show.toggle()
        } label: {
            HStack {
                Image(systemName: "plus")
                Text("Add data")
            }
            .padding()
            .frame(maxWidth: .infinity)
        }
        .buttonStyle(.plain)
        .background {
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(.primary, lineWidth: 0.2)
        }
        .padding()
        .sheet(isPresented: $show){
            Text("Pop Window")
        }
    }
}
```

However, this style has a side effect, which is make not all parts of the button can be clicked. Only the parts containing text or an image can be clicked. This is why the empty parts of a plain button cannot be clicked.

<video src="https://swift.my.id/content/media/2023/07/Screen-Recording-2023-07-29-at-07.18.54-android-phone.mp4" controls="controls">
</video>

To fix this issue, it's actually quite simple. Just add the `.contentShape` modifier within the Button's content. Remember, it should be inside the Button's content, not the Button it self.

```swift
func contentShape<S>(
    _ shape: S,
    eoFill: Bool = false
) -> some
```

So, the code can be modified as follows.

```swift
struct ContentView: View {
    @State private var show = false
    var body: some View {
        Button {
            show.toggle()
        } label: {
            HStack {
                Image(systemName: "plus")
                Text("Add data")
            }
            .padding()
            .frame(maxWidth: .infinity)
            .contentShape(RoundedRectangle(cornerRadius: 10.0))
        }
        .buttonStyle(.plain)
        .background {
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(.primary, lineWidth: 0.2)
        }
        .padding()
        .sheet(isPresented: $show){
            Text("Pop Window")
        }
    }
}
```

With this modification, all parts of a button with the `.plain` style now will be clickable.

<video src="https://swift.my.id/content/media/2023/07/Screen-Recording-2023-07-29-at-07.42.05-android-phone.mp4" controls="controls">
</video>

The `.contentShape` modifier is very useful in situations like above, or in other cases, such as when you want to add buttons inside List items.

Happy experimenting, and I hope this little tip is helpful.

{% github https://github.com/meshwara/SwiftUI-Plain-Button-Click %}