Delete Warning - Everyday Interface Patterns

A static danger-zone warning shows consequences, Keep account and Delete account buttons, and no deletion, submission, or backend call.

Program

Danger-zone UI should make consequences and safer choices visible. This lesson shows a static warning only, not a deletion flow.

delete_account_warning.html

Visuals: captured from real browser rendering

<section class="delete-warning" aria-labelledby="delete-title">
  <h2 id="delete-title">Delete account</h2>
  <p>This would remove profile details, saved settings, and billing history from the account view.</p>
  <div class="actions">
    <button type="button">Keep account</button>
    <button type="button">Delete account</button>
  </div>
  <p class="note">Static danger-zone warning only; no deletion, submission, or backend call runs.</p>
</section>
<style>
  .delete-warning { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b91c1c; background: #fef2f2; padding: 12px; }
  .delete-warning p, .note { margin: 0; }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions button { padding: 8px 12px; }
  .note { color: #7f1d1d; }
</style>

Label the danger-zone warning.
The section is labelled by its visible heading.
Name the destructive action.
The heading states the risky account action plainly.
Show consequence text.
The paragraph explains what would be affected.
Show the safe action.
The first button offers a non-destructive choice.
Show the destructive action.
The second button names the destructive choice without running it.
Check the delete account warning.
The warning shows consequences, both buttons, and no deletion, submission, or backend call.

danger heading The heading names the destructive account action.

consequences text The warning states what would be affected.

safe action Keep account is visible next to Delete account.