Confirmation of user input: inline button or popup/modal?

I have a few instances, where users can cancel filling out web forms. In the current design the web site will open a modal in the center of the screen (which is mostly not, where the original cancel button is located) with a confirmation dialog after the user has clicked "cancel" to prevent errors. But there is also the possibility to use "inline buttons" to catch accidental clicks. These button are or like this example here:

after the "x" is clicked, the button changes to a confirmation button:

In my opinion, both modal and the changing button have pros and cons. I am hesitant to use "changing buttons", but they imply minimal movement by the user and they do not need to change focus to another part of the screen which increases efficiency.

I could not find any discussion on this topic or the differences between the two methods and would like to hear some opinions.

Example images were taken from here.