# Deletion

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 

{% hint style="success" %}
**Implementation:** Mark items as "deleted" with a timestamp, allow restoration within 30 days, then permanently delete.
{% endhint %}

### 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](https://design.mirakl.com/design/components/actions/action-menu) under a [MenuButton](https://design.mirakl.com/design/components/actions/buttons) and regrouped all together at the end of the menu, or placed in non-intrusive locations where they are not immediately visible to users.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FRdKnr9MRuwUrQg3ilIDd%2Fcritical-action-buttons.png?alt=media&#x26;token=32754574-952f-48b8-8268-dc22eb98662d" alt="Comparison of button styles showing two examples. Left side: blue &#x27;Standard button&#x27; with &#x27;More&#x27; dropdown menu containing &#x27;Change category&#x27; and &#x27;Edit catalogs&#x27; options. Right side: red &#x27;Destructive button&#x27; with &#x27;More&#x27; dropdown menu containing &#x27;Change category&#x27; and &#x27;Delete&#x27; option with red trash icon.&#x22;"><figcaption><p>Normal actions vs critical actions</p></figcaption></figure>

#### Implementation examples

**Example of destructive button in a page title:**

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F8l3AlR4B76wz458w4fkW%2Fcritical-action-actionmenu.png?alt=media&#x26;token=d06a5c9b-7ec7-40a7-8a31-1eb08f92a793" alt="Image of an ActionMenu nested under a MenuButton, showing a destructive ActionMenuItem"><figcaption><p>Action menu with a destructive ActionMenuItem</p></figcaption></figure>

{% hint style="success" %}
**Dos:**

* Nest the action in an ActionMenu - using a Destructive ActionMenuItem - under a MenuButton
* Group all destructive actions at the end of the list
  {% endhint %}

{% hint style="danger" %}
**Don't**

* Show a destructive action as primary action in PageTitle
  {% endhint %}

**Example of a destructive button in a datatable:**

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FFN4dGLq60jaHv7vMAE4S%2Fcritical-action-datatable.png?alt=media&#x26;token=cd277de9-b3ce-4f13-8933-4f9af3df2f19" alt="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"><figcaption><p>Datatable using trailing actions in an actionMenu with a destructive action</p></figcaption></figure>

{% hint style="success" %}
**Dos**

* Use datatable trailing actions with an ActionMenu to nest the critical action
  {% endhint %}

{% hint style="danger" %}
**Don't**

* Use datatable trailing actions with button to show the critical action within the datatable
  {% endhint %}

**Example of a destructive button in bulk actions:**

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FiMdaAf5f287iq3937KSv%2Fcritical-action-bulk.png?alt=media&#x26;token=58a7de6f-c434-4229-8b63-e26112d1476d" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Dos**

* Nest the critical action under the additional actions MenuButton
  {% endhint %}

{% hint style="danger" %}
**Don't**

* Use a button directly visible within the bulk bar &#x20;
  {% endhint %}

#### 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.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FwYUbRGq5PMJ8drGMyQpS%2Fcritical-action-simple-confirmation-modal.png?alt=media&#x26;token=ee7df853-3cd5-4917-936b-a0cbc34bb4b3" alt="Modal dialog titled &#x22;Delete business holidays&#x22; asking user to confirm deletion of &#x22;Assomption&#x22; holiday. Contains warning text &#x22;This action cannot be undone&#x22; with Cancel and Delete action buttons."><figcaption><p>Simple destructive confirmation Modal</p></figcaption></figure>

### 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.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FW1UM56L6VM4rnmf7pv4b%2Fcritical-action-confirmation-modal.png?alt=media&#x26;token=b87a5099-e19e-42f9-91df-f0ec9049ea76" alt="Image of a strong confirmation modal for a critical and destructive action"><figcaption><p>Strong confirmation modal for a critical and destructive action</p></figcaption></figure>

**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.

{% hint style="success" %}
**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
  {% endhint %}

{% hint style="danger" %}
**Do not use for:** Routine actions, reversible changes, low-consequence operations
{% endhint %}