Contextual delete confirmation for SaaS

Why this matters?

Traditional delete modals often break the flow.

They interrupt the user's context by pulling them into a separate layer just to confirm an action. On top of that, these modal typically lack a clear visual or spatial association with the element being deleted. The positioning feels arbitrary—detached from the target item—which can create hesitation or uncertainty for the user.

To solve these issues, I designed a contextual delete confirmation that appears directly beneath the target element. Unlike traditional modals that pull users out of the flow and feel disconnected from the action they’re confirming, this approach keeps everything in context. By anchoring the confirmation to the element itself, it reinforces the association and reduces cognitive load—users instantly understand what they’re about to delete without losing their place or momentum.

Highlighting the targeted element

To make the action even clearer, I added a red highlight to the element being targeted for deletion. This subtle visual cue reinforces the connection between the action and the object, reducing ambiguity and helping prevent accidental deletions—especially in interfaces with multiple similar elements.

Make delete look like delete.

I intentionally design destructive actions and buttons in bold, prominent red to ensure they stand out clearly from primary and secondary actions. While this approach might feel a bit old-school in today’s trend-driven, monochrome UIs, I believe usability should take priority over aesthetics. Clear visual hierarchy and affordance matter more than following the latest styles.