Rounded button background box color

Question

I'd like to make the. box surrounding my rounded button match the background but it's darkened. I would also like to eliminate the dark circle below the button, which looks like it must be generated from using NavigationLink.

Code is as follows:

            Button(action: {
                self.displayPopupMessage4 = true
                // name = shell("my script")
            }) {Text("About")
                    .padding()
                    .foregroundColor(.white)
                    .background(.gray)
                .cornerRadius(100)}
            .alert(isPresented: $displayPopupMessage4){
                Alert(title: Text("Attention"), message: Text(shell("/opt/local/nvis/bin/nvis -v")), dismissButton:
                        .default(Text("OK"), action: {self.showDetail = true})
                )
            }
            
            if #available(macOS 13.0, *) {
                NavigationLink(destination:            DetailView().navigationBarBackButtonHidden(true), isActive: self.$showDetail) { EmptyView() }
            } else {
                // Fallback on earlier versions
            }
            

I want the dark frame around the button to be the hame as the background, and don't want a NavigationLink visible button.

Answer 1

To adjust the appearance of your button and eliminate the dark circle below it, you'll need to make some changes to your SwiftUI code. Here's how you can modify it:

Button(action: {
    self.displayPopupMessage4 = true
}) {
    Text("About").padding()
        .foregroundColor(.white)
        .background(Color.gray) // Use Color.gray instead of .gray
        .clipShape(Circle()) // Clip the button to a circle shape
    }
    .alert(isPresented: $displayPopupMessage4) {
        Alert(title: Text("Attention"), message: Text(shell("/opt/local/nvis/bin/nvis -v")), dismissButton:
    .default(Text("OK"), action: {
        self.showDetail = true
    })
)
}

Answer 2

just add .buttonStyle(.plain) to your Button and your NavigationLink

EDIT-1:

Here is my full test code that works for me on MacOS 14.4. That is, no shaded rectangle behind the button.

struct ContentView: View {
    @State private var displayPopupMessage4 = false
    @State private var showDetail = false
    
    var body: some View {
        ZStack {
            Color.yellow.ignoresSafeArea() // <--- for testing
            Button(action: {
                self.displayPopupMessage4 = true
            }) {
                Text("About")
                    .padding()
                    .foregroundColor(.white)
                    .background(.gray)
                    .cornerRadius(100)
            }
            .buttonStyle(.plain) // <--- here
            .alert(isPresented: $displayPopupMessage4) {
                Alert(title: Text("Attention"), message: Text("/opt/local/nvis/bin/nvis -v"), dismissButton:
                        .default(Text("OK"), action: {
                            self.showDetail = true
                        })
                )
            }
            
            if #available(macOS 13.0, *) {
                NavigationLink(destination: Text("destination"), isActive: self.$showDetail) {
                    EmptyView()
                }
                .buttonStyle(.plain) // <--- here
            } else {
                // Fallback on earlier versions
            } 
        }
    }
}

Answer 3

If .buttonStyle(.plain) doesn't work (see other answer) then I'm wondering if some kind of accessibility setting for button shapes could be the reason for the rounded rectangle in the background? I wasn't able to reproduce it though, the plain button style worked for me.

You could try applying your own ButtonStyle, in case it helps:

struct MyButtonStyle: ButtonStyle {
    let bgColor: Color
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .foregroundStyle(.white)
            .background(bgColor)
            .clipShape(RoundedRectangle(cornerRadius: 100))

    }
}

The button definition can then be simplified to the following:

Button("About") {
    self.displayPopupMessage4 = true
    // name = shell("my script")
}
.buttonStyle(MyButtonStyle(bgColor: .gray))
.alert(isPresented: $displayPopupMessage4) {
    // as before
}

For the NavigationLink, use .buttonStyle(.plain) if this works (you reported in a comment that it does).