Do you follow best UI practices for delete buttons?

Accidentally deleting important data can be a disaster for your users and your support team. A poorly placed or unclear destructive action can result in irreversible mistakes, lost data, and frustrated users.

These actions need to be carefully designed with strong visual cues, clear labels, and proper safeguards.

Use red for danger consistently

Delete buttons should always stand out with a red color. This is a well-established visual convention that immediately signals danger to users.

• Use red only for destructive actions (not warnings or generic alerts)
• Avoid using red buttons for neutral or positive actions

❌ Figure: Bad example - Wrong color for a delete button

✅ Figure: Good example - Red is the right color for a delete button

Use the right icon in the right position

Icons make buttons faster to recognize and reduce ambiguity. A trash can icon next to the label reinforces the nature of the action.

• Always use the trash can (🗑️) or appropriate destructive icon
• Place the icon to the left of the button label
• Avoid ambiguous or abstract icons (E.g. Broom icon (🧹) is used for “clear all” or “clean up", not "delete". Cross icon (❌) means “cancel” or "wrong", not "delete")

❌ Figure: Bad example - Cross icon usually means "Cancel" and should be avoided for permanent deletion. The button is also missing a text label

✅ Figure: Good example - Button has a Trash/Bin icon positioned to the left of the text labe

Position delete buttons with care

Placing a delete button next to a primary action (e.g. "Save" or "Confirm") is dangerous. Users may misclick due to proximity.

• Place delete buttons away from primary actions
• Use space or visual separation between them
• Make destructive buttons less prominent (except when the primary purpose is deletion)

❌ Figure: Bad example - "Delete" and "Save" are too close together, which can lead to accidental clicks

✅ Figure: Good example - "Delete" button in red, with the right icon, and visually isolated from safe actions

Ask for confirmation when necessary

Not every destructive action needs a popup, but if the data is important or irreversible, you should ask the user to confirm.

Use confirmations when:

• Deleting data that can’t be recovered (e.g. a database record or user profile)
• The user might not realize the consequences

✅ Figure: Good example - Confirming a deletion

Use tooltips

Sometimes you might have a UI with limited space that doesn’t allow text labels.

For icon-only delete buttons (for example, a red trash icon in a table row), always provide a tooltip on hover or focus.

✅ Figure: Good example - Tooltip gives clarity to an icon-only delete button

Ensure accessibility and keyboard navigation

Don't rely solely on color to convey meaning — red may be hard to distinguish for users with color blindness.

• Include a label, not just an icon
• Make sure buttons can be navigated and triggered via keyboard
• Support screen readers with aria-label="Delete project" or similar

Summary of best practices

For more guidance on destructive actions in UI design:

• NNG: Confirmation Dialogs Can Prevent User Errors — If Not Overused
• Microsoft Design: Commanding Destructive Actions