Dialog

The built-in dialog tag — a small corner-anchored panel with no backdrop, with a built-in trigger button. Usage, options, and a live example.

A built-in tag for a dialog — a small, fixed panel anchored to a corner of the viewport, with no backdrop (the rest of the page stays interactive). It ships with a trigger button and the open/close state wired up. Since there’s no overlay to click, dismiss it with its own close button. Anchor it with position, size and shape it with size / radius / withBorder, and tune the open/close with the props below. It starts closed and opens from its trigger button.

Use it as {% dialog %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'dialog', …).

Demonstrations

The trigger button opens the dialog; the block body is its content:

Bordered, top-left, larger

position anchors to any corner or edge; size widens the panel, radius rounds it, and withBorder draws an outline:

A tuned pop-in transition

transition / transitionDuration tune how the dialog appears from its corner. Because a Dialog has no backdrop, its close button is the only way to dismiss it — so it always stays available:

With other components

A dialog and a notification combine into a dismissable toast: the dialog supplies the corner anchor, the trigger button, and a real dismiss (its close button), while the notification supplies the toast styling — the colored accent line and the title. Click Show notification, then dismiss it with the close button in the panel’s corner.

Attributes

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="Dialog"], or through the Mantine Styles API classes. Its parts render only while the dialog is shown. The relevant classes:

/* Every rendered Dialog carries this island marker */
[data-aardvark-island="Dialog"] { }

/* Mantine Styles API classes */
.mantine-Dialog-root { }
.mantine-Dialog-closeButton { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — onto the rendered overlay. Open the dialog and click it: the injected onclick reads the overlay’s text and alerts it.