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.
- A 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.
Provide clear guidance as to the destructive consequences of the action.
List all destructive actions that will be taken. Include direct consequences of the action(s) if known.
For extremely destructive actions, consider requiring a text input to complete the action.
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.