Requests confirmation before an action.
Your edits will be lost if you leave this page.
<div class="cfd-demo">
<div class="cfd cfd--warning" style="width:360px;" role="dialog" aria-modal="true" aria-labelledby="cfd-question">
<div class="cfd__icon" aria-hidden="true"></div>
<h3 class="cfd__question" id="cfd-question">Discard unsaved changes?</h3>
<p class="cfd__detail">Your edits will be lost if you leave this page.</p>
<div class="cfd__actions">
<button type="button" class="cfd__btn cfd__btn--cancel">Cancel</button>
<button type="button" class="cfd__btn cfd__btn--confirm" style="background:#E8A020;border-color:#E8A020;">Yes, discard</button>
</div>
<button type="button" class="cfd__close" aria-label="Close dialog">
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line><line x1="16" y1="4" x2="4" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line></svg>
</button>
</div>
</div>
<style>
.cfd-demo { display: grid; place-items: center; min-height: 260px; background: rgba(36,20,48,.45); border-radius: 12px; padding: 24px; box-sizing: border-box; }
.cfd { position: relative; font: 15px/1.5 system-ui, sans-serif; background: #FAF7F2; color: #241430; border-radius: 14px; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 26px 24px 22px; box-sizing: border-box; text-align: center; }
.cfd__icon { width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font: 700 20px system-ui, sans-serif; }
.cfd--question .cfd__icon { background: #BFD9F255; }
.cfd--question .cfd__icon::before { content: "?"; }
.cfd--warning .cfd__icon { background: #E8A02033; }
.cfd--warning .cfd__icon::before { content: "!"; }
.cfd--info .cfd__icon { background: #A8E6C155; }
.cfd--info .cfd__icon::before { content: "i"; }
.cfd__question { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.cfd__detail { margin: 0 0 20px; font-size: 13.5px; color: #241430cc; }
.cfd__actions { display: flex; justify-content: center; gap: 10px; }
.cfd__btn { font: 500 14px system-ui, sans-serif; padding: 9px 18px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; }
.cfd__btn--cancel { background: transparent; border-color: #24143033; color: #241430; }
.cfd__btn--confirm { color: #FAF7F2; }
.cfd__btn:focus-visible, .cfd__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.cfd__close { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; color: #24143099; }
</style><div class="grid place-items-center min-h-[260px] bg-[#241430]/45 rounded-xl p-6 box-border">
<div role="dialog" aria-modal="true" aria-labelledby="cfd-tw-question" class="cfd-tw cfd-tw--warning relative font-sans text-[15px] leading-relaxed text-center bg-[#FAF7F2] text-[#241430] rounded-2xl shadow-2xl box-border" style="width:360px;padding:26px 24px 22px;">
<div class="cfd-tw__icon w-[42px] h-[42px] mx-auto mb-3.5 rounded-full grid place-items-center font-bold text-lg" aria-hidden="true"></div>
<h3 id="cfd-tw-question" class="mb-1.5 text-[17px] font-semibold">Discard unsaved changes?</h3>
<p class="mb-5 text-[13.5px] text-[#241430]/80">Your edits will be lost if you leave this page.</p>
<div class="flex justify-center gap-2.5">
<button type="button" class="px-[18px] py-2.5 rounded-lg text-sm font-medium border border-[#24143033]">Cancel</button>
<button type="button" class="px-[18px] py-2.5 rounded-lg text-sm font-medium text-[#FAF7F2]" style="background:#E8A020;border-color:#E8A020">Yes, discard</button>
</div>
<button type="button" class="absolute top-3 right-3 bg-transparent border-none cursor-pointer p-1 rounded-md text-[#24143099]" aria-label="Close dialog">
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line><line x1="16" y1="4" x2="4" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line></svg>
</button>
</div>
</div>
<style>
.cfd-tw--question .cfd-tw__icon { background: #BFD9F255; }
.cfd-tw--question .cfd-tw__icon::before { content: "?"; }
.cfd-tw--warning .cfd-tw__icon { background: #E8A02033; }
.cfd-tw--warning .cfd-tw__icon::before { content: "!"; }
.cfd-tw--info .cfd-tw__icon { background: #A8E6C155; }
.cfd-tw--info .cfd-tw__icon::before { content: "i"; }
</style>export function ConfirmationDialog({
question = "Discard unsaved changes?",
detail = "Your edits will be lost if you leave this page.",
tone = "warning",
confirmText = "Yes, discard",
accent = "#E8A020",
width = 360,
}) {
const icon = { question: { bg: "#BFD9F255", mark: "?" }, warning: { bg: "#E8A02033", mark: "!" }, info: { bg: "#A8E6C155", mark: "i" } }[tone] ?? { bg: "#BFD9F255", mark: "?" };
return (
<div style={{ display: "grid", placeItems: "center", minHeight: 260, background: "rgba(36,20,48,.45)", borderRadius: 12, padding: 24, boxSizing: "border-box" }}>
<div role="dialog" aria-modal="true" aria-labelledby="cfd-question" style={{ position: "relative", width, boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif",
textAlign: "center", background: "#FAF7F2", color: "#241430", borderRadius: 14, boxShadow: "0 20px 44px rgba(36,20,48,.28)", padding: "26px 24px 22px" }}>
<div aria-hidden="true" style={{ width: 42, height: 42, margin: "0 auto 14px", borderRadius: "50%", display: "grid", placeItems: "center",
font: "700 20px system-ui, sans-serif", background: icon.bg }}>{icon.mark}</div>
<h3 id="cfd-question" style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 600 }}>{question}</h3>
<p style={{ margin: "0 0 20px", fontSize: 13.5, color: "#241430cc" }}>{detail}</p>
<div style={{ display: "flex", justifyContent: "center", gap: 10 }}>
<button type="button">Cancel</button>
<button type="button" style={{ background: accent, borderColor: accent, color: "#FAF7F2" }}>{confirmText}</button>
</div>
<button type="button" aria-label="Close dialog" style={{ position: "absolute", top: 12, right: 12, background: "none", border: "none", cursor: "pointer", padding: 4, borderRadius: 6, color: "#24143099" }}>
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
<line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
<line x1="16" y1="4" x2="4" y2="16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
</svg>
</button>
</div>
</div>
);
}