Do you follow best UI practices for delete buttons?

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