Delete or Remove terminology

Overview

Delete refers to a permanent, non-recoverable action, and Remove refers to an action that can be restored or reapplied.

Delete

The term Delete should always be used to refer to any action that will cause the permanent deletion of an item/setting or content. Examples of this type of action might be:

Deleting a SIM
Deleting a SAM user
Deleting an AuthKey

Any button with using the --icon-delete icon will automatically apply the correct --alert color style on hover.

Rules

Always

Use the term Delete when an item is to be deleted from the system entirely and is NOT recoverable
Use the icon --icon-delete
Show a confirmation dialog to confirm the delete action
In the confirmation dialog ensure the dialog uses the --alert visual state
In the confirmation dialog ensure the dialog header icon uses the --alert visual state
In the confirmation dialog ensure the Delete button uses the --primary and --alert styles and is right most in the dialog
In the confirmation dialog ensure the Cancel button uses the default button style (not --primary)

Never

Use no icon (except on the Delete button in the confirmation dialog)
Use any icon except --icon-delete
Use a visual state other than --alert

Examples

Example of delete button next to an AuthKey

html

Copy

<table class="ds-datatable --embedded">
  <thead>
    <tr>
      <th>AuthKey ID</th>
      <th>Created</th>
      <th class="--min">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>keyId-xSAuvFPADUNKouQlEahVkkdPRHEuuvZb</td>
      <td>2022-02-08 10:17</td>
      <td>
        <button class="ds-button --icon-delete --plain">
          <span>Delete</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>keyId-QiucONNHCTHjOKpPjQFlXRtRZqKSGVqL</td>
      <td>2022-02-08 09:42</td>
      <td>
        <button class="ds-button --icon-delete --plain">
          <span>Delete</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Example of the confirmation dialog for deleting an AuthKey

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --narrow --alert">
    <header class="ds-banner">
      <i class="ds-icon --icon-delete --alert"></i>
      <div>
        <h3>Delete the AuthKey</h3>
        <p>
          This operation can not be undone. Are you sure you want to revoke the
          AuthKey?
        </p>
      </div>
    </header>
    <section>
      <dl class="ds-details --vertical">
        <dt>AuthKey ID</dt>
        <dd>
          <div class="ds-text --large --code">
            keyId-xSAuvFPADUNKouQlEahVkkdPRHEuuvZb
          </div>
        </dd>
      </dl>
    </section>
    <footer>
      <button class="ds-button --primary --alert">
        <span>Delete</span>
      </button>
      <button class="ds-button">
        <span>Cancel</span>
      </button>
    </footer>
  </div>
</div>

Remove

The term Remove should always be used when an item/setting or content is to be removed or disassociated, but the action can be reversed or reapplied. Examples of this type of action might be:

Removing an Assigned Group from a User Account
Removing an Attached Role from a User Account

Rules

Always

Use the term Remove when an item to be removed/disassociated is recoverable or reversible 1. Use the icon --icon-remove
Optionally show a confirmation or dialog if the Remove action may cause other unintended side effects
If a confirmation dialog is used ensure the dialog does not have a visual state
If a confirmation dialog is used ensure the Remove button uses the --primary and --alert styles and is right most in the dialog
If a confirmation dialog is used ensure the Cancel button uses the default button style (not --primary)

Never

Use no icon (except on the Remove button in the confirmation dialog)
Use any icon except --icon-remove
Use a visual state

Examples

Example of remove button next to a User Role

html

Copy

<table class="ds-datatable --embedded">
  <thead>
    <tr>
      <th>Role ID</th>
      <th>Description</th>
      <th class="--min">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>full-access</td>
      <td>Grant user full admin access</td>
      <td>
        <button class="ds-button --icon-remove --plain">
          <span>Remove</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>remote-dev-access</td>
      <td>Remote access for testing</td>
      <td>
        <button class="ds-button --icon-remove --plain">
          <span>Remove</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Example of the confirmation dialog for removing a User Role

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --narrow">
    <header class="ds-banner">
      <i class="ds-icon --icon-remove"></i>
      <div>
        <h3>Remove role</h3>
        <p>
          Are you sure you want to remove the role attached to this user
          account?
        </p>
      </div>
    </header>
    <section>
      <dl class="ds-details --vertical">
        <dt>Role ID</dt>
        <dd>
          <div class="ds-text">remote-dev-access</div>
        </dd>
      </dl>
    </section>
    <footer>
      <button class="ds-button --primary --alert">
        <span>Remove</span>
      </button>
      <button class="ds-button">
        <span>Cancel</span>
      </button>
    </footer>
  </div>
</div>