Destructive action

Pattern specification + reference specimen.

Pattern: Destructive action

Universal — delete, remove, sign out, revoke access.

Visual

  • Color: IntrinsicColorRole.critical / --color-*-error / .red
  • Never accent color for destructive
  • Placement: overflow menu or dedicated section — not primary toolbar hero

Confirmation

Always confirm irreversible actions:

Title: Delete meal?
Message: This can't be undone.
Actions: Delete (destructive) · Cancel

Keystone

  • Admin writes append to keystone.audit_log
  • Confirm shows entity identifier (user id, household id) — not PII dump

Copy

  • Button: Delete, Remove, Sign Out — verb matches outcome
  • Success: past tense ("Meal deleted.")
  • No guilt language

iOS

.confirmationDialog("Delete meal?", isPresented: $showDelete, titleVisibility: .visible) {
    Button("Delete", role: .destructive) { deleteMeal() }
    Button("Cancel", role: .cancel) {}
}

Web

  • Native <dialog> or accessible modal
  • Focus trap; return focus on dismiss