Rounded corner border on a Button in SwiftUI

Question

So I have the following code:

private var googleButton: some View {
    Button {
        // Empty
    } label: {
        HStack(alignment: .firstTextBaseline) {
            Image(systemName: "globe")
            Text("Continue with Google")
                .font(.headline)
                .frame(height: 35)
        }
        .foregroundColor(.black)
        .frame(maxWidth: .infinity)
    }
    .tint(.white)
    .buttonStyle(.borderedProminent)
    .controlSize(.regular)
}

Which produces this look:

How do I properly apply a border with the proper corner radius?

I have tried applying .border, etc.. to the button but it's all causing errors.

Does this answer your question? [Button border with corner radius in Swift UI](https://stackoverflow.com/questions/58928774/button-border-with-corner-radius-in-swift-ui) — , Nov 25 '22 at 01:03
I think you just want a proper way to set a border on a view (doesn't matter if it's a button or whatever), for that you can refer to my answer [here](https://stackoverflow.com/a/74613685/13728460) which will produce the result you want, but you may have to add corner radius to your button manually (to match the radius of the border) — Levan Apakidze, Jul 17 '23 at 20:25

score 1 · Answer 1 · answered Nov 25 '22 at 03:37

1

You can use Label if you want.

 Label("Continue with Google", systemImage: "heart")
            .padding()
            .background {
                Color.gray
            }.foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))

answered Nov 25 '22 at 03:37

azamsharp

19,710
36
144
222

I don't get this, how does this give me a border? – SLE Nov 25 '22 at 04:33
The background color will give grey background and then clipShape will cut the shape into rounded rectangle. – azamsharp Nov 25 '22 at 15:12

score 0 · Answer 2 · answered Nov 25 '22 at 08:02

I would go with something like:

Button {
                print("example")
            } label: {
                HStack(alignment: .firstTextBaseline) {
                    Image(systemName: "globe")
                    Text("Continue with Google")
                        .font(.headline)
                        .frame(height: 35)
                }
                .foregroundColor(.black)
                .frame(maxWidth: .infinity)
            }
            .background(.white)
            .controlSize(.regular)
            .cornerRadius(5) // Have your custom value here

Rounded corner border on a Button in SwiftUI

2 Answers2