Error Without Recovery

html

<div class="ewr-demo" style="--accent:#E8A020;">
  <span class="ewr-demo__badge">{{unless fixed}}&#10007; Anti-pattern: error without recovery

tailwind

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

react

export function ErrorWithoutRecovery({
  errorTitle = "Something went wrong",
  fixed = false,
  showDetails = 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: error without recovery"}
      </span>
      <div style={{ padding: 14, borderRadius: 10, background: "#b3261e0f", borderLeft: "4px solid #b3261e" }}>
        <p style={{ margin: "0 0 4px", fontWeight: 700 }}>{errorTitle}</p>
        {!fixed && <p style={{ margin: 0, color: "#241430aa", fontSize: 12 }}>That's all we know. No cause, no next step.</p>}
        {fixed && (
          <>
            <p style={{ margin: "0 0 8px", color: "#241430cc", fontSize: 12 }}>The payment service didn't respond in time.</p>
            {showDetails && <code style={{ display: "block", marginBottom: 10, fontSize: 11, fontFamily: "ui-monospace, monospace", color: "#241430aa" }}>Error 504 \u2014 gateway timeout at 14:02:11</code>}
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <button type="button" style={{ padding: "8px 16px", borderRadius: 7, border: "none", background: accent, fontWeight: 700, cursor: "pointer" }}>Try again</button>
              <a href="#" style={{ fontSize: 12, color: accent, fontWeight: 600 }}>Contact support</a>
            </div>
          </>
        )}
      </div>
    </div>
  );
}