HStack width changed when button label is changed

Question

I created a HStack to include 3 buttons for TTS speaking control. However, when the middle button state is changed between play and pause. As the width of these 2 buttons is different I think, then the HStack width is changed accordingly.

How could I prevent this behavior to have a consistent width of HStack in this case?

struct HomeTest: View {
    @State private var isSpeaking: Bool = false
    
    var body: some View {
        HStack(spacing: 18) {
            Button {
                
            } label: {
                Image(systemName: "gobackward")
                    .font(.system(size: 32))
                    .padding(6)
                    .foregroundStyle(.darkBlue10)
                    .clipShape(Circle())
            }
            Button {
                isSpeaking.toggle()
            } label: {
                Image(systemName: (isSpeaking ? "pause" : "play"))
                    .font(.system(size: 32))
                    .padding(6)
                    .foregroundStyle(.darkBlue10)
                    .clipShape(Circle())
            }
            Button {
                
            } label: {
                Image(systemName: "goforward")
                    .font(.system(size: 32))
                    .padding(6)
                    .foregroundStyle(.darkBlue10)
                    .clipShape(Circle())
            }
        }
        .padding(.horizontal, 6)
        .padding(.vertical, 4)
        .background(.lightBlue10.opacity(0.7))
        .mask { Capsule() }
        .overlay {
            RoundedRectangle(cornerRadius: 36)
                .inset(by: 1)
                .stroke(.white, lineWidth: 1)
        }
    }
}

Answer 1

You can provide a minimum width for this Image:

Button {
    isSpeaking.toggle()
} label: {
    Image(systemName: (isSpeaking ? "pause" : "play"))
        .frame(minWidth: 30) //<- set minWidth here
        .font(.system(size: 32))
        .padding(6)
        .foregroundStyle(.darkBlue10)
        .clipShape(Circle())
}

Output: