Deletion

Guidelines for implementing safe, clear, and intentional deletion workflows that protect users from unintended data loss.

Deletion is a critical operation that permanently removes data from the system. Unlike other actions, deletion often cannot be undone and can have serious consequences for business activities. These guidelines ensure users make informed decisions and prevent accidental data loss.

Types of deletions

Permanent Deletion

Data is irreversibly destroyed and cannot be recovered. Use when:

  • Regulatory or privacy requirements mandate data destruction

  • Storage constraints require permanent removal

  • Data has no business value for retention

Examples: Deleting customer personal data (GDPR compliance), purging old logs, removing test data

Data is hidden or marked as deleted but can be restored within a timeframe. Use when:

  • Users may need to recover deleted items

  • Audit trails are important

  • Regulatory compliance requires retention

Examples: Deleted products, deactivating integrations, moving items to trash

Displaying destructive actions within the interface

Use destructive components

Use the Destructive Button variant to signal critical actions. Destructive actions should be nested in an ActionMenu under a MenuButton and regrouped all together at the end of the menu, or placed in non-intrusive locations where they are not immediately visible to users.

Comparison of button styles showing two examples. Left side: blue 'Standard button' with 'More' dropdown menu containing 'Change category' and 'Edit catalogs' options. Right side: red 'Destructive button' with 'More' dropdown menu containing 'Change category' and 'Delete' option with red trash icon."
Normal actions vs critical actions

Implementation examples

Example of destructive button in a page title:

Image of an ActionMenu nested under a MenuButton, showing a destructive ActionMenuItem
Action menu with a destructive ActionMenuItem

Example of a destructive button in a datatable:

Datatable with search bar, filters button, and actions menu. The actions menu is open on the second row displaying 3 actions: View details, Download, and Delete. The Delete action is destructive
Datatable using trailing actions in an actionMenu with a destructive action

Example of a destructive button in bulk actions:

Always ask user confirmation

All deletion actions must be confirmed by users through a non-skippable confirmation modal. This ensures users understand what will be deleted and prevents accidental data loss. Never allow direct deletion through a single click or keyboard shortcut without explicit confirmation.

Modal dialog titled "Delete business holidays" asking user to confirm deletion of "Assomption" holiday. Contains warning text "This action cannot be undone" with Cancel and Delete action buttons.
Simple destructive confirmation Modal

Critical deletion

Critical actions have serious, often irreversible consequences for business activities such as deleting data, canceling orders, disabling integrations, or removing configurations.

What are critical actions?

Operations that:

  • Permanently delete, deactivate or destroy data (products, orders, stores, configurations) that will have a business impact

  • Break relationships (removing integrations, disconnecting channels)

  • Trigger irreversible consequences (canceling live orders, disabling features)

  • Affect multiple users or systems (deleting shared resources, removing permissions)

Core principles

Intentionality

Users must actively choose to perform critical actions. Never allow accidental triggers through single clicks, hover-only interactions, or shortcuts.

Be fully transparent. The user must understand the consequences before taking action.

  • State exactly what will be deleted/affected

  • Explain what cannot be undone

  • Identify dependent objects or data

When permanent deletion is necessary, make this absolutely clear.

Always require user confirmation

All critical deletions must require a strong and non-skippable confirmation modal.

Image of a strong confirmation modal for a critical and destructive action
Strong confirmation modal for a critical and destructive action

Structure

  1. Header with status: State the action clearly

    • ✅ "Delete product mapping configuration"

    • ❌ "Are you sure?" (too vague)

  2. Description: Explain consequences without questions

    • State what will be deleted

    • Clarify irreversibility

    • Mention dependencies

  3. Strong confirmation input: require the user to type the action name before they can confirm the modal.

Last updated

Was this helpful?