Soracom

Design System
  1. Home
  2. Design system
  3. Ux patterns
  4. Delete content

Delete content

Consistent implementation of deleting content

See also

For details on when to use the term ‘Delete’ vs ‘Remove’ refer to the Delete or Remove terminology documentation.

Overview

This page outlines the various ways to implement the UI for a deleting content in the User Console.

Confirmation dialog

Always use a simple dialog to confirm the action before deleting.

Always
  1. State what will be deleted in the header title
  2. Use the icon --icon-delete in the header
  3. In the header description, state “This operation can not be undone” (or similar).
  4. In the header description, ask “Are you sure you want to delete the [item to be deleted]”
  5. Use the --alert visual state
  6. In the confirmation dialog ensure the Delete button uses the --primary and --alert styles and is right most in the dialog
  7. In the confirmation dialog ensure the Cancel button uses the default button style (not --primary)

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 authkey</span>
      </button>
      <button class="ds-button">
        <span>Cancel</span>
      </button>
    </footer>
  </div>
</div>