How do I prevent my Delete button from triggering a form submission?

Hi Elixir forum!

I have a function component to view, edit and delete an object from my database. This component obviously contains a form to perform and submit the edits that the user makes, but it also contains a Delete button to delete it, see the screenshot below.

Screenshot 2025-09-24 at 19.17.33573×232 6.79 KB

Shortened for brevity, this is the implementation of that component:

<div class="...">
  <.form for={@form} phx-change="validate-changes" phx-submit="save-changes">
    <%!-- form inputs here --%>

    <footer class="flex justify-between items-center">
      <div class="flex gap-2">
        <.button
          variant="secondary"
          disabled={not changed?(@form)}
          phx-disable-with="..."
        >
          Save
        </.button>
        <.button {[{@return_method, @return_to}]}>Cancel</.button>
      </div>
      <.button
        variant="outline"
        class="btn-md btn-error text-error hover:text-base-100"
        phx-click="delete"
        phx-value-id={@job_request.id}
        data-confirm="Are you sure you want to delete this job request?"
      >
        <.icon name="hero-trash" class="size-5" />
      </.button>
    </footer>
  </.form>
</div>

My problem is that whenever I click the Delete button, it not only triggers the delete event like I want it to, but it also triggers the form submission, thus causing the save-changes event to be fired as well. How do I prevent that from happening so that only the delete event gets fired?

What I’ve tried so far:

• Use phx-click with “delete”. Does not work, as described.
• Use phx-click with JS.push(“delete”) |> JS.patch(@return_to). Does not work, same problem.
• Tried putting the same props as what the Cancel button gets on the Delete button (effectively: patch={@return_to}), along with phx-click="delete". Does not work, the delete event is never triggered, only the patch is executed.
• Moved the Delete button outside of the .form component, but then I couldn’t figure out how to neatly style the button to still be positioned in the same way the screenshot shows.
• I read in the docs that phx-change can also be applied on individual elements rather than just the form, which would cause the form’s change event to be ignored and only the individual element’s change event to be fired. I thought maybe the same applies to phx-submit, but it does not: putting phx-submit=”delete” or something similar on the Delete button has no effect and the problem still persists.

Do you have any ideas for a good solution?

important to note:

• the .button component was generated by Phoenix 1.8.1 when I created the project, I merely extended the variants and made it possible to extend the classes passed down into it.
• the Cancel button works just fine and doesn’t trigger a form re-submission, because the generated .button component renders as a .link when given an href, navigate or patch prop.