Skip to content

Soracom

Design System
Home Design System Ux Patterns Deleting or removing content

Deleting or removing content

Implementing delete or remove

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

Rules 

Always
  1. Use the term Delete when an item is to be deleted from the system entirely and is NOT recoverable
  2. Use the icon --icon-delete
  3. Use the --alert visual state
  4. Show a confirmation dialog to confirm the delete action
  5. In the confirmation dialog ensure the dialog uses the --alert visual state
  6. In the confirmation dialog ensure the dialog header icon uses the --alert visual state
  7. In the confirmation dialog ensure the Delete button uses the --primary and --alert styles and is right most in the dialog
  8. In the confirmation dialog ensure the Cancel button uses the default button style (not --primary)
Never
  1. Use no icon (except on the Delete button in the confirmation dialog)
  2. Use any icon except --icon-delete
  3. Use no visual state
  4. 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 --alert --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 --alert --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 --alert --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 --alert --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
  1. Use the term Remove when an item to be removed/disassociated is recoverable or reversible
  2. Use the icon --icon-remove
  3. Optionally show a confirmation or dialog if the Remove action may cause other unintended side effects
  4. If a confirmation dialog is used ensure the dialog does not have a visual state
  5. If a confirmation dialog is used ensure the Remove button uses the --primary and --alert styles and is right most in the dialog
  6. If a confirmation dialog is used ensure the Cancel button uses the default button style (not --primary)
Never
  1. Use no icon (except on the Remove button in the confirmation dialog)
  2. Use any icon except --icon-remove
  3. 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>