Delete vs Remove

Intro#

Remove and Delete are defined quite similarly, but the main difference between them is that delete means erase or permanent removal (rendered nonexistent or nonrecoverable, erased from the system), while remove means take away but still in existence or non-permanent removal.

Programmers LanguageEveryday Language
Create a record, then add it to a containerYou create something from scratch, like a new customer. Once created, you add the customer to a sale.
Remove a record from the containerYou remove a customer from a sale: they still exist in the system, but no longer associated to the sale but can be easily added back to the sale.
Delete or destroy itIf you delete a customer from the system they no longer exist and will need to be created again.

Editorial#

Labels#

The delete action can be confused with remove and vice versa; the label used should be intuitive to the user. As a general rule, if data will be destroyed use delete if data is taken away but still exists use remove - see Actionable Words.

Content#

  • Make dialog text concise, what will be destroyed. What other impacts might occur?

  • Ensure dialog is easy to scan and is consumable - see Grammar and Mechanics.

  • Always write in sentence case.

  • Modal titles should always be written as a question.

  • Itemize in list format if multiple objects will be lost. Example:

    Confirmation modal

Behaviour & Considerations#

Considerations#

  • What are the implications of the delete or remove action for the user?
  • Will the action be a low, medium or high impact delete?
  • Will the user need the interruption of a modal or other confirmation if the user can easily recreate whatever item they are deleting or removing?
  • How long will the action take? Seconds, minutes, hours, or days?
  • What should the user do if the delete or remove fails?
  • Is this a single or bulk action?

Behaviour#

Based on the answers to considerations a confirmation dialog may or may not be necessary.

Avoid#

  • Uneccessary confirmation dialogs if object/item/data can be recreated easily.
  • Interrupting the user flow in disruptive way if the deleted data can be recreated easily.
  • Lengthy or complex dialog that isn't scannable - see Grammer and Mechanics.

Do#

  • Use confirmation dialogs (modals) if the impact of the delete cannot be undone or will require a lot of time and effort to recreate, such as multiple deletions or removals.
  • Use confirmation dialogs to prevent accidental loss of records or data.
TypePermanent (deleted from system)Use whenLabelsComponent type(s)Confirmation type(s)Examples
Delete - low impactYesthe action cannot be undone but it is easy to recreate the dataDelete or RemoveDanger link or danger buttonOptionalDeleting a task or user from a queue
Delete - med to high impactYesthe action cannot be undone or it would be very expensive and time-consuming to recreate the dataDeleteDanger link or danger buttonModalDeleting a classification from product tree
RemoveNothe action can be undone or easily recreatedRemove or CancelDanger link, link button or default buttonOptionalRemove a product from a sale

Delete#

Delete erases an object/item. It is a destructive action. Delete actions cannot be easily undone and are typically permanent. Warn the user of any negative consequences if an object is erased, such as loss of data. Only use the a danger or danger link buttons for delete actions.

Low-impact deletion#

Use when it’s trivial to undo deletion or recreate the data. Delete the data upon click or tap without further warning.

Moderate-High impact deletions#

Use when an action cannot be undone or the data cannot be recreated easily - when it would be very expensive or time-consuming to recreate data. This pattern is also useful if you could be deleting more than one thing. Also use if the action deletes a large amount of data, or if other important items would be deleted as a result of the action.

Ask for confirmation with a modal of the delete, with guidance about what will occur if they delete and any additional actions that may be required. Example: In order to delete a classification, products that exist under the classification need to be migrated to another classification before it can be deleted.

Post-deletion#

After the user deletes data, return to the page that lists the data deleted. Present a success notification.

If the deletion fails, use the alert component to tell the user that deletion failed.

Remove#

This action removes a single or multiple objects/items (as a bulk action). Remove is distinct from delete, as removed data is not destroyed (non-destructive). It is a non-permanent removal (hidden on the front-end/UI but kept in existence). A remove action is rarely the primary action on the page and should not be emphasized. Use the link or default button.

Example of remove multiple items in a list

Last updated on by Larissa Hsia