Destructive Action Without Confirmation

html

<div class="dc-demo" style="--accent:#E8A020;">
  <span class="dc-demo__badge">{{unless fixed}}&#10007; Anti-pattern: no confirmation

tailwind

<div style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <span class="dc-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: no confirmation

react

export function DestructiveNoConfirm({
  actionLabel = "Delete account",
  itemName = "your account",
  fixed = false,
  accent = "#E8A020",
}) {
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: no confirmation"}
      </span>
      <button type="button" style={{ padding: "10px 18px", borderRadius: 8, border: "none", background: accent, color: "#241430", fontWeight: 700, cursor: "pointer" }}>{actionLabel}</button>
      {!fixed && <p style={{ marginTop: 10, fontSize: 12, color: "#b3261e", fontWeight: 600 }}>&#10003; Deleted immediately \u2014 one click, no way back</p>}
      {fixed && (
        <div style={{ marginTop: 12, padding: 14, borderRadius: 10, background: "#FAF7F2", border: "1.5px solid " + accent }}>
          <p style={{ margin: "0 0 10px", fontSize: 12 }}>Delete {itemName}? This can't be undone.</p>
          <div style={{ display: "flex", gap: 8 }}>
            <button type="button" style={{ flex: 1, padding: 8, borderRadius: 7, border: "1.5px solid #24143033", background: "transparent", cursor: "pointer" }}>Cancel</button>
            <button type="button" style={{ flex: 1, padding: 8, borderRadius: 7, border: "none", background: "#b3261e", color: "#FAF7F2", fontWeight: 700, cursor: "pointer" }}>Yes, delete</button>
          </div>
        </div>
      )}
    </div>
  );
}