A Useful Inline Delete/Confirm UI Pattern

By on

For my personal bookmark service I had to implement the ability to delete bookmarks. I wanted this operation to be easily accessible directly in the list of bookmarks:

Screenshot of an example bookmark with a delete button.

When you click on Delete... the button is replaced with two more buttons: Cancel and Delete!:

Screenshot of an example bookmark with the delete button pressed and the inline confirmation visible.

The mouse cursor – which has not moved – is positioned over the cancel operation so accidental clicks are fine. Clicking on the “Delete!” button really deletes the bookmark.

There is no sudden interruption in contrast with a modal dialog or a popup menu and you can completely ignore the operation and move on.