How to Stack a button on top of a NavigationLink without triggering it?

Question

I have a list of views, each view contains text which is a NavigationLink and a cross which is a button

I want to be able to click the cross button inside each view without it also triggering the NavigationLink, how would I do this?

Xcode example 

relevant code:

MenuView.swift

struct MenuView: View {
    @State var showDetail = false
    @State var addingNewGoal = false
    @EnvironmentObject var library: Library
    
    
    
    var body: some View{
            VStack {
                HStack {
                    List(library.sortedGoal){ goal in
                        goalListItem(goal: goal)
                        
                    }
                }
                
                NavigationLink(destination: AddDailyTaskView()){
                    Text("Add Daily Task")
            }
        }
    }
}

GoalViews.swift

import SwiftUI

extension Goal{
    
    struct GoalRow: View {
        let goal:Goal

        var body: some View{
            HStack {
                NavigationLink(
                    destination: DetailView(goal: goal)
                ){
                    Text(goal.title)
                }
                
            }
        }
    }
}

    struct doneButton: View {
        @ObservedObject var goal: Goal
        
        
        var body: some View{
            
            let bookmark = "cross"
            Button{
                goal.done.toggle()
            } label:{Image(systemName: goal.done ? "\(bookmark).fill" : bookmark )}
        }
    }
    
    struct goalListItem: View {
        @ObservedObject var goal: Goal
        var body: some View {
            ZStack{
    //          GoalBackgroundShape()
                HStack {
                    Goal.GoalRow(goal: goal)
                    doneButton(goal: goal)
                }
            }
        }
    }