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
|Programmers Language||Everyday Language|
|Create a record, then add it to a container||You create something from scratch, like a new customer. Once created, you add the customer to a sale.|
|Remove a record from the container||You 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 it||If you delete a customer from the system they no longer exist and will need to be created again.|
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.
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:
- 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?
Based on the answers to considerations a confirmation dialog may or may not be necessary.
- 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.
- 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.
|Type||Permanent (deleted from system)||Use when||Labels||Component type(s)||Confirmation type(s)||Examples|
|Delete - low impact||Yes||the action cannot be undone but it is easy to recreate the data||Delete or Remove||Danger link or danger button||Optional||Deleting a task or user from a queue|
|Delete - med to high impact||Yes||the action cannot be undone or it would be very expensive and time-consuming to recreate the data||Delete||Danger link or danger button||Modal||Deleting a classification from product tree|
|Remove||No||the action can be undone or easily recreated||Remove or Cancel||Danger link, link button or default button||Optional||Remove a product from a sale|
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.
Use when it’s trivial to undo deletion or recreate the data. Delete the data upon click or tap without further warning.
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.
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.
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.