Destructive Actions

Any action that a user takes to destroy or delete data is a destructive action. Destructive actions with unknown or severe consequences should have additional friction to eliminate unintentional data loss.

Overview

Destructive actions are any user-initiated action with unknown or potentially severe consequences.

Friction in the user interface is often regarded as something to avoid or resolve. However, it can be useful when preventing a user from completing a destructive action when the user is unaware of the consequences of their action.

 

In cases where we are prioritizing error prevention, we take steps to:

  • Assist users from accidentally clicking a destructive action.
  • Help users to understand what happens after they confirm their destructive action.
  • Provide alternative options to potentially resolve their problem without resorting to destructive action.

Severity guidelines

Depending on the severity of destructiveness, we can implement the following friction patterns.

High severity

If a destructive action is difficult to undo, has major impacts, or data will be lost permanently, strongly consider implementing a modal to confirm the action or guide the user to an alternative route.

  • modal used for confirming a destructive action should use the delete confirmation modal variant with a danger button variant to confirm the action.
  • Require input confirmation of the deleted object's name when the action removes additional resources within.
  • Body content can use bold styling to draw attention to the consequences of the destructive action.
  • Avoid using notification banners to emphasize the content inside a modal.
Simple Delete Confirmation

Provide clear guidance as to the destructive consequences of the action.

Batch Delete Confirmation

List all destructive actions that will be taken. Include direct consequences of the action(s) if known.

Delete Confirmation Example

For extremely destructive actions, consider requiring a text input to complete the action.

Incomplete Delete Confirmation

Provide a warning dialog if a user attempts a destructive action that is not currently possible.

 

Medium severity

Destructive actions can introduce annoyance to the user when performed unintentionally. Consider assisting the user with an additional step to prevent accidentally clicking this action. A real example would be to put this action within a button dropdown or local actions nav requiring a minimum of two clicks.

 

Low severity

The destructive action can easily be undone and no actual data was lost. Consider adding no friction at all in order to streamline the interface, especially in places where the action needs to be performed in bulk. These kinds of destructive actions can be simple tertiary, icon, or ghost buttons.