dialog

Native <dialog> modal. Backdrop blur, slide-in animation.

status: stable js: trigger support: dialog

Preview

This overlay stays hidden until triggered — open it in the live demo →

Markup

<dialog class="dialog" id="X"><header class="dialog-header"><div class="dialog-title">T</div><div class="dialog-description">D</div></header><div class="dialog-body">…</div><footer class="dialog-footer"><form method="dialog"><button class="btn btn-ghost">Cancel</button></form><button class="btn">OK</button></footer></dialog>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/dialog.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add dialog

Accessibility

Open via showModal(); native focus trap; add aria-labelledby

Classes

.dialog .dialog-header .dialog-title .dialog-description .dialog-body .dialog-footer .dialog-close

Dependencies

base/tokens