Warning State

UI indicating potential danger.

html

<div class="warning warning--caution" role="alert">
  <span class="warning__icon" aria-hidden="true">▲</span>
  <div class="warning__body">
    <p class="warning__title">This action cannot be undone</p>
    <p class="warning__message">Deleting this workspace removes all projects, files and members permanently.</p>
    <label class="warning__ack">
      <input type="checkbox"  />
      I understand the consequences
    </label>
  </div>
</div>
<style>
.warning { display: flex; align-items: flex-start; gap: 12px; max-width: 400px; padding: 14px 16px; box-sizing: border-box;
  border-radius: 10px; border: 1.5px solid; font: 13.5px/1.45 system-ui, sans-serif; color: #241430; }
.warning--caution { background: color-mix(in srgb, #E8A020 14%, #FAF7F2); border-color: #B4790A; }
.warning--caution .warning__icon { color: #B4790A; }
.warning--danger { background: color-mix(in srgb, #B3261E 10%, #FAF7F2); border-color: #B3261E; }
.warning--danger .warning__icon { color: #B3261E; }
.warning__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.warning__title { margin: 0 0 2px; font-weight: 700; }
.warning__message { margin: 0 0 8px; color: #241430b3; }
.warning__ack { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.warning__ack input:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div role="alert" class="warning-tw warning-tw--caution flex items-start gap-3 max-w-md px-4 py-3.5 box-border rounded-lg border-[1.5px] font-sans text-[13.5px] text-[#241430]">
  <span aria-hidden="true" class="warning-tw__icon text-lg flex-shrink-0 mt-px">▲</span>
  <div>
    <p class="m-0 mb-0.5 font-bold">This action cannot be undone</p>
    <p class="m-0 mb-2 text-[#241430]/70">Deleting this workspace removes all projects, files and members permanently.</p>
    <label class="flex items-center gap-1.5 text-xs cursor-pointer">
      <input type="checkbox"  />
      I understand the consequences
    </label>
  </div>
</div>
<style>
.warning-tw--caution { background: color-mix(in srgb, #E8A020 14%, #FAF7F2); border-color: #B4790A; }
.warning-tw--caution .warning-tw__icon { color: #B4790A; }
.warning-tw--danger { background: color-mix(in srgb, #B3261E 10%, #FAF7F2); border-color: #B3261E; }
.warning-tw--danger .warning-tw__icon { color: #B3261E; }
</style>

react

export function WarningState({
  title = "This action cannot be undone",
  message = "Deleting this workspace removes all projects, files and members permanently.",
  severity = "caution",
  acknowledged = false,
}) {
  const palette = severity === "danger"
    ? { bg: "color-mix(in srgb, #B3261E 10%, #FAF7F2)", border: "#B3261E", icon: "#B3261E" }
    : { bg: "color-mix(in srgb, #E8A020 14%, #FAF7F2)", border: "#B4790A", icon: "#B4790A" };
  return (
    <div role="alert" style={{ display: "flex", alignItems: "flex-start", gap: 12, maxWidth: 400, padding: "14px 16px",
      boxSizing: "border-box", borderRadius: 10, border: `1.5px solid ${palette.border}`, background: palette.bg,
      font: "13.5px/1.45 system-ui, sans-serif", color: "#241430" }}>
      <span aria-hidden="true" style={{ fontSize: 18, flexShrink: 0, marginTop: 1, color: palette.icon }}>▲</span>
      <div>
        <p style={{ margin: "0 0 2px", fontWeight: 700 }}>{title}</p>
        <p style={{ margin: "0 0 8px", color: "#241430b3" }}>{message}</p>
        <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, cursor: "pointer" }}>
          <input type="checkbox" checked={acknowledged} readOnly />
          I understand the consequences
        </label>
      </div>
    </div>
  );
}