I want to build a top bar that consist of 3 icon buttons but when I press one button, the other buttons are also pressed. Maybe because of the systemName SF Symbols? I don’t know if I miss something. Help a newbie here

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea()
            VStack {
                HStack(alignment: .top, spacing: 0) {
                    
                        Button(action: {
                        }){
                            Image(systemName: "house.fill").tint(.white)
                        Spacer()
                            
                        Button(action: {}){
                            Image(systemName: "cart.fill").tint(.white)
                        }
                            
                        Button(action: {}){
                            Image(systemName: "magnifyingglass").tint(.white)
                        }
                    }
                }.font(.system(size: 23))
                
                    HStack{
                            Text("New Released")
                                .foregroundColor(.white)
                                .font(.title2)
                                .bold()
                                .padding(EdgeInsets(top: 16, leading: 0, bottom: 0, trailing: 0))
                            Spacer()
                    }
                Spacer()
            }
            .padding()
        }
    }
}

THE PREVIEW
Not press anything

When pressing

Is this a SwiftUI bug or am I missing something here?

I tried to add .buttonStyle(BorderlessButtonStyle()) but not worked.

>Solution :

please check your first button code, you mistakenly wrapped other 2 buttons inside it that’s way they all are effecting each other. Here is the correct code

    struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea()
            VStack {
                HStack(alignment: .top, spacing: 0) {
                    
                        Button(action: {
                            print("Button1")
                        }){
                            Image(systemName: "house.fill").tint(.white)
                        } // this was placed wrongly  
                        Spacer()
                            
                        Button(action: {
                            print("Button2")
                        }){
                            Image(systemName: "cart.fill").tint(.white)
                        }
                            
                        Button(action: {
                            print("Button3")
                        }){
                            Image(systemName: "magnifyingglass").tint(.white)
                        }
                    
                }
                .font(.system(size: 23))
                
                    HStack{
                            Text("New Released")
                                .foregroundColor(.white)
                                .font(.title2)
                                .bold()
                                .padding(EdgeInsets(top: 16, leading: 0, bottom: 0, trailing: 0))
                            Spacer()
                    }
                Spacer()
            }
            .padding()
        }
    }
}