Dialogs - Kitchen Sink

Title and content

The title renders in the navigation row, in place of the go-back button.

import { Dialog } from '@mediayard/agoratopia-ui/components/dialogs';

let open = $state(false);

<Button onclick={() => (open = true)}>Open dialog</Button>

<Dialog {open} title="Dialog Title" onclose={() => (open = false)}>
	<p>Any content goes here.</p>
</Dialog>

Sticky footer

The footer snippet sticks to the bottom of the panel while the content scrolls.

<Dialog {open} title="Your Details" onclose={() => (open = false)}>
	<p>The footer sticks to the bottom of the panel.</p>

	{#snippet footer()}
		<Button variant="primary" onclick={() => (open = false)}>Save</Button>
	{/snippet}
</Dialog>

Go-back navigation

Pass onback to render the chevron on the left, as the select modal does.

<!-- Passing onback renders a go-back chevron on the left of the navigation row. -->
<Dialog {open} onback={() => (open = false)} onclose={() => (open = false)}>
	<p>Navigation shows a go-back button instead of a title.</p>
</Dialog>

Nested dialogs

Dialogs stack: clicking outside or pressing Escape closes only the topmost one.

<Dialog open={outer_open} title="Outer" onclose={() => (outer_open = false)}>
	<Button onclick={() => (inner_open = true)}>Open inner dialog</Button>

	<Dialog open={inner_open} onback={() => (inner_open = false)} onclose={() => (inner_open = false)}>
		<p>Clicking outside or pressing Escape only closes this one.</p>
	</Dialog>
</Dialog>