Quill docs

Dialog

A modal dialog: a trigger opens a backdrop + a role=dialog surface (aria-modal) that traps focus until dismissed. Its title is auto-wired via aria-labelledby; Escape, the close button, and a backdrop click all close it. The surface effect and radius are orthogonal.

Live demo#

Click "Open dialog". The surface traps focus; Escape, the × button, or a backdrop click closes it. With JavaScript off, the trigger + a closed dialog render as a valid fallback.

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Dialog::new("demo", /* ... */).island("demo-island", "Open dialog")
    )

Code#

Construct the component with its builder:

let body = el("p").child(text("This surface is focus-trapped while open …"));
Dialog::modal("confirm-delete", "Delete project?", body)
    .effect(Effect::Elevated)
    .island("confirm-delete-island", "Open dialog")