Xcode SwiftUI button default layout has border

Question

I am using Xcode to create an app that requires buttons. Right now, when I create a button, I get the text label, which I want, but I also get a background with rounded corners around it. I want to have the button with just the label but without the background. I was using Swift Playgrounds before Xcode and did not have this problem. Here is my code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 1000, height: 500)
                .foregroundColor(.red)
            Button(action: {
                
            }) {
                Text("Button")
            }

        }
    }
}

This is what my button looks like

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 1000, height: 500)
                .foregroundColor(.red)
            Button(action: {
                
            }) {
                Text("Button")
            }

        }
    }
}

This is what my button looks like

user_15959847 · Answer

Customize the button's style with the .buttonStyle view modifier:

Button(action: {}) {
    Text("Button")
}
.buttonStyle(.borderless)

.borderless, .plain, and .link are the options that will result in no border.

user_16731401 · Answer

Here is a Button without any background or border.

Button("Click") {
    //do something
}
.background(.clear) //this

Xcode SwiftUI button default layout has border

2 Answers