Modal
Centered confirmation/detail dialog with scrim, focus trap, and Esc-to-close.
Preview
Static preview De-roled visual mock, safe to render inline.
Delete job?
This can't be undone.
<div style="position:relative;height:220px;display:flex;align-items:center;justify-content:center;background:var(--nx-scrim);border-radius:14px"><div class="nx-modal__card" style="width:280px;position:relative"><div class="nx-panel__head"><span class="nx-panel__title">Delete job?</span><span class="nx-iconbtn">×</span></div><div class="nx-panel__body"><p style="margin:0;color:var(--nx-slate-700);font-size:.88rem">This can't be undone.</p></div><div class="nx-panel__foot"><button class="nx-btn nx-btn--ghost nx-btn--sm">Cancel</button><button class="nx-btn nx-btn--danger nx-btn--sm">Delete</button></div></div></div><NxModal open title="Delete job?" footer={<><NxButton variant="ghost">Cancel</NxButton><NxButton className="nx-btn--danger">Delete</NxButton></>}>
This can't be undone.
</NxModal>Variants
Open in isolation
Mounts the real modal (role=dialog, focus trap, scrim-click + Esc to close).
<button class="nx-btn nx-btn--ghost" id="openModalDemo">Open modal</button>const [open, setOpen] = useState(false);
<NxButton variant="ghost" onClick={() => setOpen(true)}>Open modal</NxButton>
<NxModal open={open} onClose={() => setOpen(false)} title="Delete job #4412?">…</NxModal>API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | — | Required | Controls mount. |
onClose | ()=>void | undefined | Called on Esc, scrim click, or the close button. | |
title | ReactNode | undefined | Panel head title, wired to aria-labelledby. | |
footer | ReactNode | undefined | Panel foot content (usually actions). |
Classes
| Class | Description |
|---|---|
.nx-modal | Fixed, centered flex container |
.nx-modal__card | The dialog surface |
Accessibility
- role="dialog" aria-modal="true"; the in-modal scrim is re-zeroed (z-index:0) within its own stacking context so it never paints above the card's buttons.
- Same focus-trap/scroll-lock/Escape/focus-return contract as Drawer.
Do / Don’t
- Do: Use for a short, blocking confirmation or a small focused form.Don’t: Don't use a modal for a long form — prefer a full page or a drawer.