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

Soft Deletion (Recommended)

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

Implementation: Mark items as "deleted" with a timestamp, allow restoration within 30 days, then permanently delete.

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.

Normal actions vs critical actions

Implementation examples

Example of destructive button in a page title:

Action menu with a destructive ActionMenuItem

Dos:

• Nest the action in an ActionMenu - using a Destructive ActionMenuItem - under a MenuButton

• Group all destructive actions at the end of the list

Don't

• Show a destructive action as primary action in PageTitle

Example of a destructive button in a datatable:

Datatable using trailing actions in an actionMenu with a destructive action

Dos

• Use datatable trailing actions with an ActionMenu to nest the critical action

Don't

• Use datatable trailing actions with button to show the critical action within the datatable

Example of a destructive button in bulk actions:

Dos

• Nest the critical action under the additional actions MenuButton

Don't

• Use a button directly visible within the bulk bar

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.

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.

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.

When to Use:

• Deleting or permanently removing data

• Canceling active processes with business impact

• Disabling critical integrations

• Removing access or permissions

• Bulk operations affecting multiple items

Do not use for: Routine actions, reversible changes, low-consequence operations