Dialog

Displays a focused interface for user interaction.

/// DEMO ///

///

<script>
  import Button from '$lib/components/base/button.svelte';
  import Dialog from '$lib/components/base/dialog.svelte';

  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open dialog</Button>
<Dialog title="Title here" bind:open>Content here...</Dialog>


Guide

1. Create escape key action to close the dialog by pressing escape key.

2. Create focus trap action to trap the focus inside dialog component.

3. Create dialog component.

Share treats:

`1`	`<script>`
`2`	`import Button from '$lib/components/base/button.svelte';`
`3`	`import Dialog from '$lib/components/base/dialog.svelte';`
`4`
`5`	`let open = $state(false);`
`6`	`</script>`
`7`
`8`	`<Button onclick={() => (open = true)}>Open dialog</Button>`
`9`	`<Dialog title="Title here" bind:open>Content here...</Dialog>`
`10`