Destructive Action

Action that deletes or causes irreversible change.

html

<button type="button" class="btn-danger btn-danger--solid" style="--bg:#C23B3B;border-radius:10px">
  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></svg> Delete 3 files
</button>
<style>
.btn-danger {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 15px/1 system-ui, sans-serif;
  padding: 11px 20px;
  border: 2px solid var(--bg);
  background: var(--bg);
  color: #FAF7F2;
  cursor: pointer;
}
.btn-danger--outline { background: transparent; color: var(--bg); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-danger:active:not(:disabled) { filter: brightness(0.92); }
.btn-danger:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-danger:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="inline-flex items-center gap-2 px-5 py-3 text-sm font-bold border-2 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:brightness-110 active:brightness-90 btn-danger-tw btn-danger-tw--solid" style="border-color:#C23B3B;border-radius:10px">
  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></svg> Delete 3 files
</button>
<style>
.btn-danger-tw--solid { background: #C23B3B; color: #FAF7F2; }
.btn-danger-tw--outline { background: transparent; color: #C23B3B; }
.btn-danger-tw--solid:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function DestructiveActionButton({
  itemLabel = "3 files",
  style = "solid",
  bg = "#C23B3B",
  radius = 10,
  disabled = false,
}) {
  const solid = style === "solid";
  return (
    <button
      type="button"
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "11px 20px",
        borderRadius: radius,
        border: `2px solid ${bg}`,
        background: solid ? bg : "transparent",
        color: solid ? "#FAF7F2" : bg,
        font: "700 15px/1 system-ui, sans-serif",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
    >
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13" />
      </svg>
      Delete {itemLabel}
    </button>
  );
}