Skip to content
Agon ĀtriumAgon Ātrium

Source code

Open source page

Dialogs

Present a focused task in an overlay with focus trapping, Escape dismissal, and focus restoration.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<button type="button" class="btn btn-primary" @click="$dispatch('dialog-open', { id: 'record-editor' })">Edit record</button>
<include src="{{ uiRoot }}/dialog.html" locals='{"id":"record-editor","title":"edit","content":"partials/editor.html"}'></include>

Create partials/editor.html in your application:

<div class="ui-dialog-body"><p>Your form or detail content.</p></div>
<footer class="ui-dialog-footer">
  <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
</footer>

Settings and behavior

  • Required include locals are id, title, and content.
  • Optional layout is standard, scrollable, fullscreen, or draggable. It defaults to standard.
  • title is a translation key. content is a trusted application template compiled by Vite.
  • Use unique IDs for independent overlays.
  • Send an optional payload with dialog-open. Read it from payload inside the overlay.
  • JavaScript callers can import openDialog from @agon/atrium.
  • A dialog-close event closes the addressed instance. Supply detail.id when dispatching globally.

Layout variants

<include src="{{ uiRoot }}/dialog.html" locals='{"id":"large-editor","title":"edit","content":"partials/editor.html","layout":"fullscreen"}'></include>
<include src="{{ uiRoot }}/dialog.html" locals='{"id":"movable-editor","title":"edit","content":"partials/editor.html","layout":"draggable"}'></include>

The fullscreen layout fills the browser viewport while retaining the close button and footer actions. It does not request operating-system fullscreen. The scrollable layout scrolls only the body, keeping the title and actions visible. Use a ui-dialog-body and ui-dialog-footer in consumer content for these layouts.

Drag a draggable dialog by its header. The move button also supports arrow keys in 20-pixel steps and Home to recenter. Movement is constrained to the viewport and resets when the dialog opens or the viewport resizes. Pointer release, cancellation, blur, and closing end the gesture. Other layouts retain their centered placement. Each variant preserves focus trapping, Escape dismissal, and focus restoration. Use x-id for form control IDs when reusing a body template across dialogs.

Consumers composing their own markup can call uiDialog(id, layout) with the same layout names. The shared template owns the pointer and keyboard bindings.

Integration notes

The shared template uses Atrium’s cancellable x-ui-trap directive, backed by focus-trap. Closing or removing the overlay cancels pending activation and restores native inert and scroll state. Drawers anchor to the logical end of the viewport and follow RTL. Do not open several modal focus traps at once. Close the current overlay before opening another.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921