Ios swift – How to align text to centre of a button while using a custom hstack length?

I would suggest the following changes:

• Instead of applying spacing to the HStack, use one or more Spacer() to provide the spacing:

HStack {
    Image(systemName: systemName)
    Spacer()
    Text(title)
    Spacer()
}

• The reason why your attempts to set a frame width didn’t seem to be working may be because you need to set the width before you apply the background color. So the .frame modifier needs to come before the .background and .clipShape.

• Your class CustomButton appears to be a button factory. However, there is no need to create an instance for each button. In fact, you have created two instances called footballLoginButton and baseballLoginButton, but you then use footballLoginButton to create both of the actual buttons, baseballLoginButton is not being used. So I would suggest changing the functions into static functions, and it can be a struct instead of a class too.

• Instead of using a fixed width and height, just let the content find its own size and then use padding to add spacing where needed.

• When it comes to button styling, it works well to define your own ButtonStyle.

• The modifier .foregroundColor is deprecated, use .foregroundStyle instead.

Here’s how it can all come together:

struct HomePage: View {

    var body: some View {
        ZStack {
            // Background gradient
            LinearGradient(gradient: Gradient(colors: [.blue, .green]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()
            VStack(spacing: 40) {
                // App Logo (replace with your actual logo)
                Image("your_app_logo")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 150, height: 70)

                Text("Select your sport:")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundStyle(.white)

                CustomButton.createBlueButton(withTitle: "football Login", systemName: "football") {
                    // Your football login action code here
                }

                CustomButton.createGreenButton(withTitle: "baseball Login", systemName: "baseball") {
                    // Your baseball login action code here
                }
            }
            .padding(.horizontal, 30)
        }
    }
}

class CustomButton {

    private struct CustomButtonStyle: ButtonStyle {
        let color: Color

        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .foregroundStyle(.white)
                .fontWeight(.bold)
                .padding()
                .background(color)
                .clipShape(RoundedRectangle(cornerRadius: 20)) // Squircle shape
        }
    }

    private static func createButton(withTitle title: String, systemName: String, color: Color, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            HStack {
                Image(systemName: systemName)
                Spacer()
                Text(title)
                Spacer()
            }
        }
        .buttonStyle(CustomButtonStyle(color: color))
    }

    static func createBlueButton(withTitle title: String, systemName: String, action: @escaping () -> Void) -> some View {
        CustomButton.createButton(withTitle: title, systemName: systemName, color: .blue, action: action)
    }

    static func createGreenButton(withTitle title: String, systemName: String, action: @escaping () -> Void) -> some View {
        CustomButton.createButton(withTitle: title, systemName: systemName, color: .green, action: action)
    }
}