Skip to main content
Urbicon UI

Dialog

Overlay dialog with optional structured layout (title/footer/intent), focus trapping, and keyboard management. Built on native <dialog stability=stable sourceHref=https://codeberg.org/urbicon/ui/src/branch/main/packages/blocks/src/lib/primitives/Dialog/index.ts related=[object Object] >.

Loading syntax highlighting...

01 Examples

Confirmation (content-only)

Without a title prop, Dialog renders your content directly — ideal for short confirmation flows with full layout freedom.
Loading syntax highlighting...

Form Dialog

Pass a title to enable the structured layout with header, scrollable body, and footer — the standard pattern for forms and editors.
Loading syntax highlighting...

Top Placement (command palette)

Use placement='top' for search or command-palette flows — anchored near the top of the viewport so results don't shift below the fold as users type.
Loading syntax highlighting...

Scrollable Content

Long body content scrolls automatically while header and footer stay pinned — useful for terms, changelogs, or any read-heavy dialog.
Loading syntax highlighting...

02 Customization

Slot Class Overrides

Fine-tune individual slots without going fully unstyled.
Loading syntax highlighting...

Fully Custom (unstyled)

Strip defaults with unstyled and rebuild the look entirely via slotClasses.
Loading syntax highlighting...

03 Accessibility

Native Dialog

Built on <dialog> with showModal() for native inertness and stacking context. Screen readers announce it automatically via aria-modal="true". When a title is set, it is linked via aria-labelledby.

Focus Trap

When open, focus is trapped inside the dialog. Tab cycles through interactive elements. On close, focus returns to the element that opened the dialog.

Keyboard

Escape closes the dialog (configurable via closeOnEscape).

Scroll Lock

While open, body scroll is locked. Long dialog content scrolls within the panel itself.

04 API Reference

18 props
18 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt