Deleting or removing content

Overview

When implementing user interaction that deletes or removes content, care should be taken to ensure a consistent and predictable experience.

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

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

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<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

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

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

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

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

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<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

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

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

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