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.

CodePudding user response：

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

CodePudding user response：

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))