Interface asking for information/decision.
Choose a new name that teammates will recognise.
<div class="dlg-demo">
<div class="dlg dlg--form" style="width:400px;" role="dialog" aria-modal="true" aria-labelledby="dlg-title">
<h3 class="dlg__title" id="dlg-title">Rename project</h3>
<p class="dlg__desc">Choose a new name that teammates will recognise.</p>
<label class="dlg__label" for="dlg-field">Name</label>
<input class="dlg__field" id="dlg-field" type="text" value="Untitled project" />
<div class="dlg__actions">
<button type="button" class="dlg__btn dlg__btn--ghost">Cancel</button>
<button type="button" class="dlg__btn dlg__btn--solid" style="background:#D9C8F0;border-color:#D9C8F0;">Save changes</button>
</div>
<button type="button" class="dlg__close" aria-label="Close">
<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>
.dlg-demo { display: grid; place-items: center; min-height: 280px; border-radius: 12px; padding: 24px; box-sizing: border-box; background: rgba(36,20,48,.3); }
.dlg { position: relative; font: 15px/1.5 system-ui, sans-serif; background: #FAF7F2; color: #241430; border-radius: 14px; border-left: 6px solid; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 24px; box-sizing: border-box; }
.dlg--form { border-left-color: #D9C8F0; }
.dlg--info { border-left-color: #BFD9F2; }
.dlg--success { border-left-color: #A8E6C1; }
.dlg__title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.dlg__desc { margin: 0 0 16px; font-size: 13.5px; color: #241430cc; }
.dlg__label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.dlg__field { width: 100%; box-sizing: border-box; font: inherit; padding: 9px 11px; border-radius: 8px; border: 1.5px solid #24143030; margin-bottom: 20px; background: #FAF7F2; color: #241430; }
.dlg__field:focus-visible { outline: 2px solid #241430; outline-offset: 1px; }
.dlg__actions { display: flex; justify-content: flex-end; gap: 10px; }
.dlg__btn { font: 500 14px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; }
.dlg__btn--ghost { background: transparent; border-color: #24143033; color: #241430; }
.dlg__btn--solid { color: #FAF7F2; }
.dlg__btn:focus-visible, .dlg__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.dlg__close { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; color: #24143099; }
</style><div class="grid place-items-center min-h-[280px] rounded-xl p-6 box-border bg-[#241430]/30">
<div role="dialog" aria-modal="true" aria-labelledby="dlg-tw-title" class="dlg-tw dlg-tw--form relative font-sans text-[15px] leading-relaxed bg-[#FAF7F2] text-[#241430] rounded-2xl border-l-[6px] shadow-2xl p-6 box-border" style="width:400px;">
<h3 id="dlg-tw-title" class="mb-2 text-lg font-semibold">Rename project</h3>
<p class="mb-4 text-[13.5px] text-[#241430]/80">Choose a new name that teammates will recognise.</p>
<label for="dlg-tw-field" class="block text-xs font-semibold mb-1.5">Name</label>
<input id="dlg-tw-field" type="text" value="Untitled project" class="w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] mb-5 bg-[#FAF7F2] text-[#241430]" />
<div class="flex justify-end gap-2.5">
<button type="button" class="px-4 py-2 rounded-lg text-sm font-medium border border-[#24143033]">Cancel</button>
<button type="button" class="px-4 py-2 rounded-lg text-sm font-medium text-[#FAF7F2]" style="background:#D9C8F0;border-color:#D9C8F0">Save changes</button>
</div>
<button type="button" class="absolute top-3.5 right-3.5 bg-transparent border-none cursor-pointer p-1 rounded-md text-[#24143099]" aria-label="Close">
<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>
.dlg-tw--form { border-left-color: #D9C8F0; }
.dlg-tw--info { border-left-color: #BFD9F2; }
.dlg-tw--success { border-left-color: #A8E6C1; }
</style>export function Dialog({
title = "Rename project",
description = "Choose a new name that teammates will recognise.",
fieldValue = "Untitled project",
variant = "form",
accent = "#D9C8F0",
width = 400,
}) {
const stripe = { form: "#D9C8F0", info: "#BFD9F2", success: "#A8E6C1" }[variant] ?? accent;
return (
<div style={{ display: "grid", placeItems: "center", minHeight: 280, borderRadius: 12, padding: 24, boxSizing: "border-box", background: "rgba(36,20,48,.3)" }}>
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" style={{ position: "relative", width, boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif",
background: "#FAF7F2", color: "#241430", borderRadius: 14, borderLeft: `6px solid ${stripe}`, boxShadow: "0 20px 44px rgba(36,20,48,.28)", padding: 24 }}>
<h3 id="dlg-title" style={{ margin: "0 0 8px", fontSize: 18, fontWeight: 600 }}>{title}</h3>
<p style={{ margin: "0 0 16px", fontSize: 13.5, color: "#241430cc" }}>{description}</p>
<label htmlFor="dlg-field" style={{ display: "block", fontSize: 12, fontWeight: 600, marginBottom: 6 }}>Name</label>
<input id="dlg-field" type="text" defaultValue={fieldValue} style={{ width: "100%", boxSizing: "border-box", font: "inherit", padding: "9px 11px", borderRadius: 8, border: "1.5px solid #24143030", marginBottom: 20, background: "#FAF7F2", color: "#241430" }} />
<div style={{ display: "flex", justifyContent: "flex-end", gap: 10 }}>
<button type="button">Cancel</button>
<button type="button" style={{ background: accent, borderColor: accent, color: "#FAF7F2" }}>Save changes</button>
</div>
<button type="button" aria-label="Close" style={{ position: "absolute", top: 14, right: 14, 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>
);
}